@alifd/field/demo/seterror.md

Fields can be used to manage data when it comes to form data manipulation and validation. After being associated with a component, the form data can be automatically written back, read, and verified.

---
title: 自定义错误 - custom errors
order: 3
---

自己控制组件的errors

---

set errors of component by yourself


````jsx
import ReactDOM from 'react-dom';
import React from 'react';
import { Input, Button } from '@alifd/next';
import Field from '@alifd/field';



class App extends React.Component {
    field = new Field(this);

    validate = () => {
        console.log(this.field.getErrors());
      this.field.validateCallback((error, values) => {
        // eslint-disable-next-line no-alert
        alert(JSON.stringify(error));
      });
    };

    render() {
        const { init, getError, setError, setErrors } = this.field;
        return (<div className="demo">
            <Input {...init('input', {
                rules: [{
                    required: true,
                    pattern: /hello/,
                    message: 'must be hello'
                }]
            })} /><br/>
            <span style={{color: 'red'}}>{getError('input')}</span>

            <br/>
            <Button onClick={() => {
                setError('input', 'set error 1');
            }}>setError</Button>

            <Button onClick={() => {
                setErrors({input: 'set error 2'});
            }}>setErrors</Button>

            <Button onClick={() => {
                setErrors({input: ''});
            }}>clear</Button>

            <br/><br/>
            <Input {...init('input2')} /><br/>
            <span style={{color: 'red'}}>{getError('input2')}</span><br/>

            <Button onClick={() => {
                setError('input2', 'errors will be removed by onChange and shown on validate');
            }}>setError</Button>

            <Button onClick={this.validate}>
            validate</Button>	
        </div>);
    }
}


ReactDOM.render(<App/>, mountNode);


````

````css
.demo .next-btn {
    margin-right: 5px;
}
````