月間18,000PV達成! 収益は毎日発生中! 記事は毎日更新中! ホワイトハッカー育成スクール通ってます! ギランバレー症候群に関する情報を集めています

【Angular】整数チェックをカスタムバリデーションで実装!

【Angular】整数チェックをカスタムバリデーションで実装!
Advertisement

 

Angularには数値チェックがデフォルトでないだと?!

数値チェックがないということは、もちろん整数チェックもありません。

ということで今回は、Angularで整数チェックを実装する方法を解説します!

 

 

まずは準備をしよう!

コンポーネント作成

新規コンポーネントを作成します。

 

カスタムバリデーション作成

今回は「custom-validator.ts」を作成しました。

※僕は「appフォルダ」の直下に「validatorフォルダ」を作成し、その中にファイルを配置しました。

 

 

整数チェックの実装

まずは、「integer.component.ts」を上記のように編集します。

 

 

続いて、「integer.component.html」を上記のように編集します。

 

 

カスタムバリデーションは上記のように編集します。

※チェックにかかるのは、「値があり、かつ整数でない」場合に限ります。

 

 

整数チェック

こんな感じですね。

 

 

Advertisement

 

整数チェックの正規表現一覧

正規表現の箇所を変えるだけで、様々なチェックが可能となります。参考までに。

チェックパターン 正規表現
0以上の整数のみ /^([1-9]\d*|0)$/
整数 (- のみ許容) /^[-]?([1-9]\d*|0)$/
整数 (+, – 許容) /^[+,-]?([1-9]\d*|0)$/
符号なし小数 /^([1-9]\d*|0)(\.\d+)?$/
符号あり小数 (- のみ許容) /^[-]?([1-9]\d*|0)(\.\d+)?$/
符号あり小数 (+, – 許容) /^[+,-]?([1-9]\d*|0)(\.\d+)?$/

 

 

なぜカスタムバリデーションを使う必要があるのか?

そもそもAngularにはデフォルトのバリデーションチェックが色々あります。

例えば、「必須チェック」「文字数チェック」などですね。

数値チェック」はデフォルトではないですが、本当にAngularがそこまで考えられていないのかと疑問に思ったのです。

だって、「emailチェック」もデフォルトであるんですよ?

で、使えそうなものがあったわけです。それが「patternチェック」です。

しかし、「patternチェック」を使って正規表現のチェックをしてもうまくチェックがかからない。。

ということで、カスタムバリデーションを自作したわけです。

 

 

ちなみにtypeがnumberの入力フォームには特殊な文字列が入力できちゃう

おまけですが、typeがnumberのinputには特殊な文字列が入力できます。

それが、「e」「.」「+」「」の4つです。

こいつらがすげーうざいんですけど、実際に入力するとどうなるのか実験してみました。

例えば、「e」と入力すると、

e入力

となります。

 

つまり、入力はできても数値として判断できないものは基本nullになります。以下参考までに。

入力値 結果
e null
1e null
e1 null
. null
1. 1
.1 0.1
+ null
1+ null
+1 1
null
1- null
-1 -1

※あくまでAngularを使ってのお話なので参考までに。

 

 

おすすめ書籍

僕はAngularの勉強をするのに以下の書籍を購入しました。おすすめですよ!

 

 

 

まとめ

今回整数チェックについて色々調べましたが、非常に勉強になりました。

特に「e」とかを入力してもnullと判断されるのは驚きでしたね。

Anuglar万歳!

Travelerを知らないの?