使用 Form.Item 设置动态错误

在 Ant Design 中，一个常见的场景是验证表单输入是否合法。如果表单输入不合法，我们需要提示用户错误信息。使用 Form.Item 的 validateStatus 和 help 属性可以实现简单的静态错误提示。但是，有时我们需要动态地显示和隐藏错误信息，这时候需要借助 getFieldError 和 isFieldTouched 这两个 API。

getFieldError 和 isFieldTouched

getFieldError 用来获取一个表单项的错误信息。需要注意的是，错误信息是一个数组，可能包含多个错误。如果表单项没有错误，它会返回 undefined。

isFieldTouched 用来判断表单项是否被用户触过。如果表单项没有被用户触过，它会返回 false。

我们可以结合这两个 API 来实现动态错误提示。具体做法是，当表单项被用户触过时，显示错误信息；否则隐藏错误信息。

示例代码

import { Form, Input } from 'antd';

const FormItem = Form.Item;

function LoginForm() {
  const [form] = Form.useForm();

  function handleLogin(values) {
    console.log(values);
  }

  function handleBlur() {
    form.validateFields(['email']);
  }

  return (
    <Form form={form} onFinish={handleLogin}>
      <FormItem
        name="email"
        rules={[{ required: true, message: '请输入邮箱' }, { type: 'email', message: '邮箱格式不正确' }]}
        validateFirst
      >
        <Input onBlur={handleBlur} placeholder="邮箱" />
        {form.isFieldTouched('email') && form.getFieldError('email').map((error) => (
          <div key={error} style={{ color: 'red' }}>
            {error}
          </div>
        ))}
      </FormItem>

      <FormItem
        name="password"
        rules={[{ required: true, message: '请输入密码' }]}
        validateFirst
      >
        <Input.Password placeholder="密码" />
      </FormItem>

      <FormItem>
        <Button htmlType="submit">登录</Button>
       </FormItem>
    </Form>
  );
}

代码中，我们定义了一个 LoginForm 组件，它包含了一个 email 表单项和一个 password 表单项。当 email 表单项被用户触过时，它会显示错误信息；否则隐藏错误信息。

在 email 表单项上，我们定义了 onBlur 回调函数，它会在表单项失去焦点时触发 validateFields(['email']) 方法。这会使 email 表单项重新验证，并更新错误信息。因为 validateFirst 属性设置为 true，只要有一个验证规则不通过，后面的验证规则就不会再执行。

在 email 表单项下面，我们使用了 getFieldError 和 isFieldTouched 两个 API 来显示和隐藏错误信息。当 email 表单项被用户触过时，form.isFieldTouched('email') 返回 true，表单项的错误信息就会被渲染出来。否则，form.getFieldError('email') 返回 undefined，就不会有任何错误信息显示。

总结

在 Ant Design 中，使用 Form.Item 的 validateStatus 和 help 属性可以实现简单的静态错误提示。但是，有时我们需要动态地显示和隐藏错误信息，这时候需要借助 getFieldError 和 isFieldTouched 这两个 API。我们可以结合这两个 API 来实现动态错误提示。