如何通过AntD表单中的getFieldError获取错误消息？

在使用Ant Design (AntD) 的表单组件时，getFieldError 是一个用来获取表单字段错误信息的函数，它是Form.Item中提供的API的一部分。这个函数非常有用，尤其是在表单验证过程中，能够有效地向用户展示具体的错误信息。

基本用法

当你使用AntD的表单时，首先需要确保表单组件使用了 Form.create() 高阶组件进行包装。这样，表单的props中就会自动注入 getFieldDecorator 和 getFieldError 等API。

getFieldError 函数的基本用法如下：

javascript
getFieldError(fieldId)

其中 fieldId 是你在 getFieldDecorator 里指定的字段ID。

示例

假设我们有一个简单的登录表单，包含用户名和密码两个字段，我们希望在表单提交时验证这些字段，并展示相应的错误信息。

javascript
import React from 'react';
import { Form, Input, Button } from 'antd';

class LoginForm extends React.Component {
  handleSubmit = e => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
      }
    });
  };

  render() {
    const { getFieldDecorator, getFieldError } = this.props.form;

    // 获取字段错误信息
    const usernameError = getFieldError('username');
    const passwordError = getFieldError('password');

    return (
      <Form onSubmit={this.handleSubmit}>
        <Form.Item
          validateStatus={usernameError ? 'error' : ''}
          help={usernameError || ''}
        >
          {getFieldDecorator('username', {
            rules: [{ required: true, message: '请输入用户名!' }],
          })(
            <Input placeholder="用户名" />
          )}
        </Form.Item>
        <Form.Item
          validateStatus={passwordError ? 'error' : ''}
          help={passwordError || ''}
        >
          {getFieldDecorator('password', {
            rules: [{ required: true, message: '请输入密码!' }],
          })(
            <Input type="password" placeholder="密码" />
          )}
        </Form.Item>
        <Button type="primary" htmlType="submit">登录</Button>
      </Form>
    );
  }
}

const WrappedLoginForm = Form.create()(LoginForm);
export default WrappedLoginForm;

解释

在上面的代码中：

1. getFieldDecorator 用于注册表单项，并绑定相关的验证规则。
2. 在每个 Form.Item 中，我们使用 validateStatus 和 help 属性来展示字段的验证状态和错误信息。这些属性的值通过 getFieldError 获取具体的错误信息。
3. 当表单提交并调用 validateFields 方法时，只有当所有规则都满足时，表单数据才会被处理；否则，相应的错误信息会通过 getFieldError 显示在界面上。

通过这种方式，getFieldError 为我们提供了一种非常直观和用户友好的方式来显示表单字段的验证错误。这对于提升用户体验和表单的交互性非常关键。