La validation du tableau de champs du formulaire de crochet React ne fonctionne pas

Question

J'ai un tableau de champs avec un champ de saisie pour lequel j'ai défini des règles de validation comme required 和 minLength.

Je souhaite que le nouveau champ soit validé immédiatement lorsqu'il est ajouté. Cependant, cela ne se produit pas et même si j'ajoute des champs vides, l'erreur pour ces champs de saisie reste indéfinie :

function App() {
  const useFormMethods = useForm({
    defaultValues: {
      test: [{ firstName: "Bill", lastName: "Luo" }]
    },
    mode: "onChange"
  });
  const { fields, append, remove } = useFieldArray({
    control: useFormMethods.control,
    name: "test",
    rules: {
      minLength: 4
    }
  });

  const onSubmit = (data) => console.log("data", data);

  return (
    <FormProvider {...useFormMethods}>
      <form onSubmit={useFormMethods.handleSubmit(onSubmit)}>
        <h1>Field Array </h1>
        <span className="counter">Render Count: {renderCount}</span>
        <ul>
          {fields.map((item, index) => {
            return (
              <li key={item.id}>
                <FormControlledInput name={`test.${index}.firstName`} />
                <FormControlledInput name={`test.${index}.lastName`} />
                <button type="button" onClick={() => remove(index)}>
                  Delete
                </button>
              </li>
            );
          })}
        </ul>
        <section>
          <button
            type="button"
            onClick={() => {
              append({ firstName: "", lastName: "" });
            }}
          >
            append
          </button>
        </section>

        <input type="submit" />
      </form>
    </FormProvider>
  );
}

Il s'agit d'une entrée contrôlée qui doit être validée :

export const FormControlledInput = ({ name }) => {
  const {
    control,
    formState: { errors }
  } = useFormContext();

  const { field, fieldState } = useController({
    name,
    control,
    rules: { required: true }
  });

  console.log(`fieldState error: `, fieldState.error);
  console.log(`formState errors: `, errors);

  return <input onChange={field.onChange} value={field.value} />;
};

Vous pouvez voir le code fonctionnel et un exemple de boîte ici. Que dois-je faire pour qu'il soit validé à chaque changement ?

Answer 1

Le append 方法是异步的，执行验证的 trigger 方法也是异步的，因此存在竞争条件，导致在向数组注册字段之前触发验证形式。在添加数组字段时触发重新验证之前，您可以只 await résultat de cette fonction pour ajouter un champ à un tableau.

 {
              await append({ firstName: "", lastName: "" });
              useFormMethods.trigger();
            }}
          >
            append
          

J'ai fourché votre CSB ici. J'ai également ajouté un hook useEffect qui déclenchera la validation lorsque le composant sera installé.