【React Native】react-hook-formで小数点の桁数をバリデーションする方法を解説

react-hook-formで小数点の桁数をバリデーションする方法を解説します。

TypeScriptで実装しているので、使っていない方は適時型情報を削除してください。

react-hook-formの基本的な使い方についてはこちらで解説しています。

【React Native】react-hook-formの基本的な使い方を解説

小数点の桁数をチェックする関数を定義

まずは、小数点の桁数をチェックする関数を定義していきます。

// 小数点を返すメソッド
export const checkDecimalLength = (value: number) => {
  // 文字列に一度直し、誤差をなくす
  const d = String(value).split('.')[1];
  return d ? d.length : 0;
};

react-hook-formでバリデーションを設定する

validateをrulesに渡すことで、カスタムバリデーションが張れるのでそれを使います。

桁数は、ご自身が設定したい数値に合わせてください。

また、こちらのコードではerrorsのmessageを取得したかったため文字列を返していますが、booleanを返すことも可能です。

rules={{
  required: '必須項目です',
  validate: {
    decimalLength: (value) => {
    const length = checkDecimalLength(value);
    if (length > 1) {
      return '小数点は第一までで入力してください';
    }
    return true;
    },
  },
}}

実行結果

例として、上のコードを実装した、体重を入力するフォームを実行した結果です。

まとめ

react-hook-formで、小数点をバリデーションする方法について解説しました。

Tipsの1つですが、参考になれば幸いです。