Angularには数値チェックがデフォルトでないだと？！
数値チェックがないということは、もちろん整数チェックもありません。
ということで今回は、Angularで整数チェックを実装する方法を解説します！
まずは準備をしよう！
コンポーネント作成
|
1 |
ng g c component/integer |
新規コンポーネントを作成します。
カスタムバリデーション作成
今回は「custom-validator.ts」を作成しました。
※僕は「appフォルダ」の直下に「validatorフォルダ」を作成し、その中にファイルを配置しました。
整数チェックの実装
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
import { Component, OnInit } from '@angular/core'; import { FormGroup, FormControl, Validators } from '@angular/forms'; import { CustomValidator } from 'src/app/validator/custom-validator'; @Component({ selector: 'app-integer', templateUrl: './integer.component.html' }) export class IntegerComponent implements OnInit { formGroup = new FormGroup({ num: new FormControl( '', Validators.compose([ CustomValidator.integer ]) ) }); constructor() { } ngOnInit() { } } |
まずは、「integer.component.ts」を上記のように編集します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<form [formGroup]="formGroup"> <div> <input type="number" name="num" formControlName="num" > <div *ngIf="formGroup.controls.num.errors && (formGroup.controls.num.touched || formGroup.controls.num.dirty)"> <span *ngIf="formGroup.controls.num.errors.integer"> 整数で入力してください。 </span> </div> </div> {{ formGroup.value | json }} </form> |
続いて、「integer.component.html」を上記のように編集します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
import { FormControl } from '@angular/forms'; export class CustomValidator { /** * 整数チェック * ※0以上(符号、少数は許容しない) * * @param formControl フォームコントロール * @return trueの場合整数ではない、falseの場合整数である、もしくは値なし */ public static integer(formControl: FormControl) { let isInteger = false; const value = String(formControl.value); // 値は文字列として扱う if (value !== null && value !== '' && value !== 'null') { isInteger = !/^([1-9]\d*|0)$/.test(value); } return { integer: isInteger }; } } |
カスタムバリデーションは上記のように編集します。
※チェックにかかるのは、「値があり、かつ整数でない」場合に限ります。
こんな感じですね。
整数チェックの正規表現一覧
正規表現の箇所を変えるだけで、様々なチェックが可能となります。参考までに。
| チェックパターン | 正規表現 |
|---|---|
| 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」と入力すると、
となります。
つまり、入力はできても数値として判断できないものは基本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万歳！
