reactjs - 如何使用来自 ReactHookForm v6 库的控制器包装器进行 Yup 验证？

Question

这是我的代码，我使用 react-hook-form v6

        // Parent component
            const schema = Yup.object().shape({
               ...
               zip: Yup.string().required("Le code postal est requis"),
               ...
            })
              ...
            const {register, handleSubmit, formState : { isSubmitSuccessful, errors }, control} = 
              useForm({
                mode: 'onTouched',
                resolver: yupResolver(schema),
                defaultValues: {
                  add: [{}]
                }
              });
              ...

          //JSX part
            <FieldNumberFormat
               name="zip"
               format="## ###"
               control={control}
               errors={errors.zip}
            >
              Code postal<span className="text-danger">*</span>
            </FieldNumberFormat>

        // Children component
            <Controller
                control={control}
                name={name}
                defaultValue=""
                render={({ onChange, value, name }) => (
                    <>
                        <NumberFormat
                            className="form-control form-control-lg"
                            type="text"
                            format={format}
                            id={name}
                            value={value}
                            onChange={onChange}
                        />
                        {errors && <span className="text-danger">{errors.message}</span>}
                    </>
                )}
            />

我想使用“onTouched”方法来显示我的控制器渲染的错误，目前，错误消息仅在我验证表单时出现。非常感谢 ！

标签： reactjsformsreact-hook-form