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

Posted 2023-03-07

【中文标题】form.validateFields() 在 ant 设计表单中的 onValuesChange 内失败

【英文标题】：form.validateFields() fails inside onValuesChange in ant design forms

【发布时间】：2020-10-25 03:36:05

【问题描述】：

我正在尝试通过验证以编程方式提交和 ant design (v4.3.4) 表单，但如果 form.validateFields() 在 onValuesChange() 内部，outOfDate: true 总是失败。 （这个表单是一个更大的表单工厂的一部分，所以我最终必须将表单组件传递给一个 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”并显示以下错误信息：

  errorFields: []
  outOfDate: true
  values:  ..

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

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

【问题讨论】：

我遇到了几乎相同的问题，也许我在antd 的 GitHub 上的问题会帮助您了解问题github.com/ant-design/ant-design/issues/26747

【参考方案1】：

以编程方式提交表单的最佳方式是使用form.submit()，它是form instance 的一部分。此功能将提交并验证您的表单。根据验证结果，将调用onFinish 或onFinishFailed（参见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）。