react-hook-form 在使用 useController 时为自定义验证设置错误信息

Question

我将 useController 用于我的文本输入，但我无法为自定义验证设置错误消息。我假设我可以使用类似于内置验证的 value/message 对象，但如果我尝试这样做，我会收到错误 TypeError: validateFunction is not a function。

这很好用：

<TextInput
                control={control}
                name={`email`}
                label={`Email *`}
                rules={{
                    required:true,
                    validate: {
                        checkEmail: v => validateEmail(v)
                    }
                }}
            />

我想做的事情：

<TextInput
                control={control}
                name={`email`}
                label={`Email *`}
                rules={{
                    required:true,
                    validate: {
                        checkEmail: {
                            value: v => validateEmail(v),
                            message: 'Invalid email'
                        }
                    }
                }}
            />

我的 TextInput 组件目前看起来像这样：

import style from "./form.module.scss"
import classnames from "classnames";
import { useController, useForm } from "react-hook-form";

export default function TextInput(props){

    const {
        field: { ref, ...inputProps },
        fieldState: { invalid, isTouched, isDirty },
        formState: { touchedFields, dirtyFields, errors }
    } = useController({
        name: props.name,
        control: props.control,
        rules: props.rules,
        defaultValue: props.defaultValue ? props.defaultValue : '',
    });


    return(
        <div className={classnames(style.fieldItem, {[style.error]: invalid})}>
            <label className={style.label}>{props.label}</label>
            <input
                className={style.textInput}
                inputRef={ref}
                type={`text`}
                placeholder={props.placeholder}
                {...inputProps}
            />
            {invalid &&
                <div className={style.message}>{`Invalid input`}</div>
            }
        </div>
    );

}

如何在使用此方法时为自定义验证设置错误消息？

Answer 1

对于使用 validate 的自定义验证，您必须直接传递错误消息：

<TextInput
  control={control}
  name={`email`}
  label={`Email *`}
  rules={{
    required:true,
    validate: {
      checkEmail: v => validateEmail(v) || "ERROR MESSAGE"
    }
  }}
/>

您可以在 section 中阅读有关 register 的内容，因为 register 和 <Controller /> 或 useController 使用相同的 rules接口。

react-hook-form 在使用 useController 时为自定义验证设置错误信息

react-hook-form Set error message for custom validation when using useController

reactjs

react-hook-form