はじめに
前回作成した「足し算アプリ」では、値を入力してCalcボタンをクリックした時の処理で、入力された値が正しく数値に変換できたときに限って足し算ができるように処理をした。正しく変換できたかどうかは、isNaNメソッドで調べた。
int1 =Number(this.text1);
int2 =Number(this.text2);
if(!Number.isNaN(int1) && !Number.isNaN(int2)){
forResult =`${int1}+${int2}=${int1+int2}`;
}
この処理はCalcをクリックするまで、値が正しいかどうかわからない。しかし、未入力があるとなど、明らかに適切出ない状況には、ブラウザ画面上で入力した時点でチェックしておけば、後の処理が簡単になる。
このように、取り扱う値が適しているかどうか調べること「バリデーション」といい、その仕組みを提供する機能を「バリデータ（validator）」と呼ぶ。
今回は、テキストボックスが未入力の時は「赤色の下線」、入力されたら「緑色の下線」の表示をする。
状態によって変わるCSS
入力状態によって色などの表示を変えるときは、Angularが出力するCSSを理解する必要がある。
入力フォームに適用されるクラス
クラス名 | 意味 |
ng-touched | クリック（タッチ）されていて、編集中の項目であることを示す |
ng-untouched | クリック（タッチ）されていない状態を示す |
ng-valid | 値が有効である |
ng-invalid | 値が向こうである |
ng-pending | バリデータの検証作業待ち |
ng-pristline | pristlineとは「きれいな」という意味。入力内容が保存されていて、今ページを閉じても問題ないことを示す |
ng-dirty | dirtyとは「汚い」という意味。ユーザーデータを編集したなどしていて、今ページを閉じると、その変更が失われる状態を示す |
1. ng-touchedとng-untouched
ユーザーが入力コントロールをクリックし編集しようとすると、ng-touchedが設定される。
そして他の場所をクリックするなどして編集対象から外すと、ng-untouchedが設定される。
2. ng-validとng-invalid、ng-pendeing
入力コントロールに設定したバリデーションで値が正しいと判定されている場合は「ng-valid」が設定される。正しくないと判定されている場合は「ng-invalid」が設定される。バリデーションが実行待ちの場合は「ng-pending」が設定される。
3. ng-pristineとng-dirty
入力コントロールに設定したバリデーションで値が正しいと判定されている場合は「ng-valid」が設定される。ユーザーが編集したあと未保存である場合にはng-dirtyが設定される。
適用されたCSSをクラスを確認する
1. ng-touched
このテキストボックスはクリックしておらず、編集中ではないので、ng-untouchedが設定されている。
2. ng-pristine
このテキストボックスは何も変更していないので、ng-pristineが設定されている。
3. ng-valid
このテキストボックスには、まだバリデーションを設定していないので、バリデーションの結果が成功とみなされ、ng-validが設定されている。
バリデーションを設定する
上記のように入力のコントロールは「クリックされているかどうか」「値が変更されているかどうか」によって、出力されるクラスが変わる。そして、バリデータを設定すれば、さらに「バリデータとして指定した条件を満たしているかどうか」によってもクラスが変わる。
空欄を許さないバリデータを設定する
Angularでは、テンプレート上のテキストボックスなど入力において、バリデータを設定すると、いくつか制約は有効になる。
Angularでは、標準で利用できるバリデータがいくつか準備されており、それらをビルドインバリデータと呼ぶ。下記がそれにあたる。
min | 最小値 |
max | 最大値 |
required | 空欄ではない必須 |
requiredTrue | チェックが付いているなど選択されている |
メールアドレスとして有効な書式 | |
minlength | 最少文字数 |
maxLength | 最大文字数 |
pattern | 指定した正規表現に合致する書式 |
今回は空欄であることを許さない、「required」というバリデータを使うことにする、このバリデータを追加するためにsimplecomponent.htmlを下記のように修正する。
<input[(ngModel)]=“text1”required>
+
<input[(ngModel)]=“text2”required>
<button(click)=“addAndShow()”>Calc</button>
<div>{{ result }}</div>
スタイルを色付けする
今度は、未入力の時は「赤下線」、そうでないときは「緑下線」を表示してみる。
このような処理は、「ng-invalidのときには赤下線」、「ng-validのときは緑下線」を表示することで実現可能である。CSSの設定は下記である。
.ng-valid {
border-bottom:2pxsolid green;
}
.ng-invalid {
border-bottom:2pxsolid red;
}
上記のように表示される。
終わりに
今回はバリデーションについて学び、テキストボックスが未入力の時は「赤色の下線」、入力されたら「緑色の下線」の表示した。次回はエラーメッセージや未入力の時は、ボタンがクリックできないように制御できる方法について学ぶ。
コメント