Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Ant Design. How to set form field error message dynamically?

Tags:

antd

A form field has many asynchronous check rules, since a composited api can check these rules one time by return different result, i do not want to fire so many api request.

like image 498
zheng li Avatar asked Nov 12 '17 07:11

zheng li


3 Answers

the syntax is updated in v4

new syntax is:

setFields.   |  Set fields status   |   (fields: FieldData[]) => void

example :

form.setFields([
   {
     name: 'field-to-update',
     errors: ['error-string'],
   },
]);
like image 178
BilluBaziger Avatar answered Oct 31 '22 11:10

BilluBaziger


Use form.setFields

Syntax

Function({ fieldName: { value: any, errors: Error } })

Example from here -

this.props.form.setFields({
  user: {
    value: values.user,
    errors: [new Error('forbid ha')],
  },
});
like image 45
Aseem Gautam Avatar answered Oct 31 '22 11:10

Aseem Gautam


When you need to add a custom error message just use validateStatus && help attributes. For example, you've got an error as loginError (string) in your props:

<Form.Item
    { ...props.loginError && {
        help: props.loginError,
        validateStatus: 'error',
    }}>
    {getFieldDecorator('email', {
        rules: [
            { required: true, message: 'You have to write the email' },
        ],
    })(
        <Input size="large"/>,
    )}
</Form.Item>
like image 9
ybaturin Avatar answered Oct 31 '22 12:10

ybaturin