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

Question

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.

BilluBaziger · Answer 1 · 2020-03-04T15:04:35.153

55

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'],
   },
]);

edited Mar 04 '20 at 15:04

answered Mar 02 '20 at 09:06

BilluBaziger

820
8
17

This only works if your fields are actually *mounted*. – Eugeny Aug 27 '21 at 11:58

score 34 · Answer 2 · edited Jan 31 '20 at 18:29

34

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')],
  },
});

edited Jan 31 '20 at 18:29

GabLeRoux

16,715
16
63
81

answered Nov 13 '17 at 09:44

A G

21,087
11
87
112

3

The syntax should be `{ fieldName: { value: any, errors: Error[] }` – Karel Frajták Dec 20 '19 at 14:38
1

The latest type definition is: `{ fieldName: {name: NamePath, errors: string[] | undefined }` Where `type NamePath = string | string[]` – Rajat Vijay Aug 16 '21 at 03:13

score 9 · Answer 3 · edited Jan 31 '20 at 18:32

9

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>

edited Jan 31 '20 at 18:32

GabLeRoux

16,715
16
63
81

answered Jan 14 '19 at 18:33

ybaturin

119
1
2
4

Awesome! I had to wrap it in parentheses in my case, which gave me the following `` – usersina Jul 05 '22 at 15:38

score 0 · Answer 4 · answered Dec 26 '22 at 03:51

                form.setFields([
                  {
                    name: "email", // required
                    value: "myemail@@gmail.com",//optional
                    errors: ["Invalid email"],
                  },
                ]);

I used it in v4.16.11

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

4 Answers4

Linked