form.validateFields() échoue dans onValuesChange dans les formulaires de conception ant

Question

J'essaie de soumettre de manière programmatique un formulaire ant design (v4.3.4) avec validation mais form.validateFields() échoue toujours avec outOfDate: true s'il est à l'intérieur onValuesChange() . (Ce formulaire fait partie d'une usine à formulaires plus large, je devrai donc éventuellement passer le composant du formulaire à une fonction props qui appellera ensuite submit.

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;

J'ai appelé le form.validatedField() fonction onValuesChange. Je n'obtiens jamais "PASSED" dans la console, même lorsque toutes les entrées ont des valeurs, j'obtiens toujours "FAILED" avec l'info d'erreur suivante :

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

Si je supprime la fonction form.validateFields() de la fonction onValuesChange alors cela fonctionne bien.

Je n'arrive pas à comprendre ce qui est outOfDate et pourquoi la validation échoue toujours dans la fonction onValuesChange.

Answer 1

La meilleure façon de soumettre un formulaire de manière programmatique est d'utiliser la fonction form.submit() qui fait partie de la exemple de formulaire . Cette fonction va soumettre et valider votre formulaire. En fonction du résultat de la validation, onFinish o onFinishFailed sera appelé (voir Formulaire 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;

En outOfDate Le problème est résolu en utilisant cette méthode. Si vous avez besoin d'une gestion supplémentaire de la validation pour un élément de formulaire, vous pouvez utiliser la méthode suivante onChange y form.validateFields() dans les composants (voir numéro ).