AntD Form中如何通过getFieldError获取错误信息？

Question

我正在使用 Ant Design 验证表单，但我遇到了 getFieldError() 的问题。我需要通过 Form.Item 的字段名称获取错误消息，但它不起作用。

下面是我的代码不起作用：

...
<Form form={form} name="login_form" onFinish={onFinish} scrollToFirstError>

  <Form.Item
    label="Password"
    name="password"
    rules={[
      {
        required: true,
        message: 'Password cannot be empty!',
      },
    ]}
    help='' // hide validating message.
  >
    <>
     {({ getFieldError }) => console.log(getFieldError('password'))}
     //it not logging anything when submit form trigger error

     <Input.Password placeholder="Enter your password" />
    </>
  </Form.Item>

 </Form>

我该如何解决这个问题？

Answer 1

您的 console.log 将在您的组件每次呈现时调用，因此您需要在表单上应用验证时重新呈现您的组件。要处理这种情况，您可以将 render prop 与 Form 组件一起使用，如下所示：

function CustomFormItem({ error, ...other }) {
  console.log(error)
  return <Input.Password placeholder="Enter your password" {...other} />;
}

function MyForm() {
  const [form] = Form.useForm();
  const onFinish = (values) => {
    console.log(values);
  };

  return (
      <Form
        form={form}
        name="login_form"
        onFinish={onFinish}
        scrollToFirstError
      >
        {(values,formInstance) => {
          return (
            <>
              <Form.Item
                label="Password"
                name="password"
                rules={[
                  {
                    required: true,
                    message: 'Password cannot be empty!',
                  },
                ]}
                help="" // hide validating message.
              >
                <CustomFormItem error={formInstance.getFieldError('password')} />
              </Form.Item>
              <Form.Item>
                <Button type="primary" htmlType="submit">
                  Submit
                </Button>
              </Form.Item>
            </>
          );
        }}
      </Form>
  );
}

考虑到上面的实现，render prop 将在表单上的每次更改时调用。

Answer 2

使用可以像下面的代码示例那样使用getFieldError();

截至目前，作为子组件的功能在 <Form.Item> 组件内无法正常工作。

 <Form {...layout} form={form} name="control-hooks" onFinish={onFinish}>
      {(values, formInstance) => {
        console.log(formInstance.getFieldError("password")[0]);
        return (
          <>
            <Form.Item
              name="password"
              label="Password"
              rules={[
                {
                  required: true
                }
              ]}
            >
              <Input />
            </Form.Item>
          </>
        );
      }}
    </Form>

AntD Form中如何通过getFieldError获取错误信息？

How to get error message by getFieldError in AntD Form?

reactjs

antd