🎑

react-hook-formのminやmaxLengthルールにエラーメッセージを設定する

2021/10/04に公開1

react-hook-formライブラリで、min, maxLengthなどの
数値を設定する制約でエラーメッセージを設定する方法がなかなかわからなかったのですが、
https://react-hook-form.com/jp/advanced-usage
に答えが書いてありました。

<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