form.validateFields() 在 ant 设计表单中的 onValuesChange 内部失败

Question

我正在尝试通过验证以编程方式提交和 ant design (v4.3.4) 表单，但是 form.validateFields() 总是失败并显示 outOfDate: true 如果它在 onValuesChange() 内。（这个表单是一个更大的表单工厂的一部分，所以我最终必须将表单组件传递给一个 props 函数，然后调用提交。

const FormA = (props: StepProps) => {
  const [form] = useForm();

  return (
    <Form
      form={form}
      name="form-a"
      onValuesChange={async (changedValues, allValues) => {
        form.validateFields().
         then(values => console.log("PASSED").
         catch(errorInfo => console.log("FAILED", errorInfo));
      }}
    >
      <Form.Item 
      rules={[{ required: true }]} 
      name="item-a">
        <Input />
      </Form.Item>
      <Form.Item
        rules={[{ required: true }]}
        name="item-b"
      >
        <Input />
      </Form.Item>
      <Form.Item
        rules={[{ required: true }]}
        name="item-c"
      >
        <Input />
      </Form.Item>
    </Form>
  );
};

export default FormA;

我调用了 form.validatedField() 函数 onValuesChange。我从来没有在控制台中得到“PASSED”，即使所有输入都有值我总是得到 'FAILED' 和以下 errorInfo:

{
  errorFields: []
  outOfDate: true
  values: { ..}
}

如果我从 onValuesChange 中删除 form.validateFields() 则它工作正常。

我似乎无法弄清楚什么是 outOfDate 以及为什么在 onValuesChange 函数中验证总是失败。

Answer 1

以编程方式提交表单的最佳方式是使用 form.submit()，它是 form instance. This function will submit and validate your form. Based on the validation result, onFinish or onFinishFailed will be called (see Form API) 的一部分。

const FormA = (props: StepProps) => {
  const [form] = useForm();

  const handleOnFinish = (values) => {
    // handle valid form submission
  }

  const handleOnFinishFailed = ({ values, errorFields, outOfDate }) => {
    // handle invalid form submission
  }

  return (
    <Form
      form={form}
      name="form-a"
      onFinish={handleOnFinish]
      onFinishFailed={handleOnFinishFailed}
    >
      ...
    </Form>
  );
};

export default FormA;

使用此方法时 outOfDate 问题已解决。如果您需要对表单项进行额外的验证处理，您可以在组件中使用 onChange 和 form.validateFields()（参见 issue）。

form.validateFields() 在 ant 设计表单中的 onValuesChange 内部失败

form.validateFields() fails inside onValuesChange in ant design forms

reactjs

antd

ant-design-pro