如何验证更改但仅在在此 React Hook 表单中提交之后？

Question

现在，我使用

isSubmitted

来控制是否应在

shouldValidate

中激活

onChange

。我希望仅在提交表单后进行验证。之后，每次更改都应该进行验证。

// JS:

const {
  setValue,
  getValues,
  formState: { isSubmitted },
} = useForm<FormData>({
  resolver: zodResolver(schema),
  defaultValues: {
    customFields: []
  },
});

// JSX:

<CustomFields
  fields={getValues('customFields')}
  keysOnly
  onChange={(fields) => {
    setValue('customFields', fields, {
      shouldDirty: true,
      shouldValidate: isSubmitted,
    });
  }}/>

React Hook Form有一个选项可以自动执行此操作吗？我不想依赖isSubmitted

。

Answer 1

您可以为此添加触发器和模式：onSubmit。

const {
      setValue,
      getValues,
      formState: { isValid },
      trigger, // Added trigger for manual validation control
    } = useForm<FormData>({
      resolver: zodResolver(schema),
      mode: 'onSubmit', // Validation happens only on submit initially
      defaultValues: {
        customFields: [],
      },
    });
and put this inside your CustomFields component.
    <CustomFields
  fields={getValues('customFields')}
  keysOnly
  onChange={(fields) => {
setValue('customFields', fields, {
  shouldDirty: true,
});

// Manually trigger validation after the form is valid/submitted
if (isValid) {
  trigger('customFields');  // Trigger validation on each change after the first submission
}
  }}
/>