Angular Webアプリ開発入門８

はじめに
終わりに

はじめに

前回作成した「足し算アプリ」では、値を入力して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	チェックが付いているなど選択されている
email	メールアドレスとして有効な書式
minlength	最少文字数
maxLength	最大文字数
pattern	指定した正規表現に合致する書式