🎑
react-hook-formのminやmaxLengthルールにエラーメッセージを設定する
react-hook-form
ライブラリで、min
, maxLength
などの
数値を設定する制約でエラーメッセージを設定する方法がなかなかわからなかったのですが、
に答えが書いてありました。
<input
{...register('test', {
min: { value: 2, message: "error message" }
})}
/>
ライブラリにも答えが書いてありました😏(v7.15.4)
...
export declare type ValidationRule<TValidationValue extends ValidationValue = ValidationValue> = TValidationValue | ValidationValueMessage<TValidationValue>;
// ↓↓↓↓↓
export declare type ValidationValueMessage<TValidationValue extends ValidationValue = ValidationValue> = {
value: TValidationValue;
message: Message;
};
// ↑↑↑↑↑
...
export declare type RegisterOptions<TFieldValues extends FieldValues = FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = Partial<{
required: Message | ValidationRule<boolean>;
min: ValidationRule<number | string>;
max: ValidationRule<number | string>;
maxLength: ValidationRule<number | string>;
minLength: ValidationRule<number | string>;
pattern: ValidationRule<RegExp>;
...
}>;
Discussion
zodライブラリを使ってデモを作ってみました。
簡単ですが、以上です。