はじめに
前回はテキストボックスが未入力の時は「赤色の下線」、入力されたら「緑色の下線」の表示を行った。今回は下記を実施する。
- 未入力のとき「左側のフィールドが空白です」や「右側のフィールドが空白です」といったメッセージを表示する
- 未入力のときはボタンがクリックできないようにする
条件によって表示・非表示を切り替える
Angularには、条件によって表示・非表示を切り替える仕組みがある。そのために「*ngif」という属性を指定する。たとえば仮に、メッセージを次のように記述する。
<span *ngIf=”条件”>左側のフィールドが空白です</span>
このように記述すると、指定した条件を満たすときだけ、このメッセージが表示され、そうでないときはメッセージが表示されないようになる。
バリデートの値に名前をつける
Angularでは、テキストボックスなどの入力フィールドに名前をつけることが出来る。名前をつけると、その時の状態（変更されたか、バリデートに成功したかなど）その名前を通じて参照できるようになる。
値 | 成り立つ条件 |
.touched | クリック(タッチ)されていて編集中 |
.untouched | クリック(タッチ)されていない |
.valid | バリデータが成功したとき |
.invalid | バリデータが失敗しているとき |
.pending | バリデータの検証作業待ち |
.pristine | 入力内容が保存されている（変更されていない） |
.dirty | 入力内容が変更されて保存されていない |
下記のように記述し、テストしてみる。
<input[(ngModel)]=“text1”required#fieldOne=”ngModel”autofocus>
+
<input[(ngModel)]=“text2”required #fieldTwo=”ngModel”>
<button(click)=“addAndShow()”>Calc</button>
<div>{{ result }}</div>
<div>
<span *ngIf=”fieldOne.invalid”>左側のフィールドが空白です</span>
<br>
<span *ngIf=”fieldTwo.invalid”>右側のフィールドが空白です</span>
</div>
条件が成り立たないときに無効にする
上記では、「*ngIf」という属性を使って表示・非表示切り替えたが、それと同様に、条件が成り立つがどうかで入力フィールドの有効・向こうを切り替える表記が存在する。それは、「[disabled]=”条件式“」である。次のように記述すると、条件は満たされないときに、ボタンがクリックできないようになる。
<button [disabled]=”条件式“>ラベル</button>
どちらかが未入力のときにボタンを無効にするには、「fieldOne.invalid」または「fieldTwo.invalid」という条件をしていすればよい。TypeScriptにおいては「||」で記述できる。
<input[(ngModel)]=“text1”required #fieldOne=“ngModel”autofocus>
+
<input[(ngModel)]=“text2”required #fieldTwo=“ngModel”>
<button(click)=“addAndShow()” [disabled]=” fieldOne.invalid||fieldTwo.invalid “>Calc</button>
<div>{{ result }}</div>
<div>
<span*ngIf=“fieldOne.invalid”>左側のフィールドが空白です</span>
<br>
<span*ngIf=“fieldTwo.invalid”>右側のフィールドが空白です</span>
</div>
まとめてひとつのフォームとして管理する
このようにテキストボックスを一つずつ条件として指定して良いが、多くの場合、ボタンというのは、画面に表示されている全ての入力フィールドのバリデータ条件が満たされたときにクリックできるというのが一般的である。そこでAngularでは、ひとつ条件を指定するのではなく、まとめてバリデータの状態を知ることもできるようになっている。そのためには、「フォーム」でとりまとめる。フォームはAngularにおいて、NgFormというオブジェクトで表現される。その書式は下記。
<Form #フォーム名 = “ngForm”>
フォームの内容
</Form>
ただし、フォームを構成する場合はそのなかにある入力フィールドには、name属性をつけるよいう決まりがある。
name属性の値は、どのようなものでも構わないが、「#名前」と同じもに設定しておくのが無難。
<form#calcForm=“ngForm”>
<input[(ngModel)]=“text1”name =“fieldOne”required #fieldOne=“ngModel”autofocus>
+
<input[(ngModel)]=“text2”name =“fieldTwo”required #fieldTwo=“ngModel”>
<button(click)=“addAndShow()”[disabled]=“calcForm.invalid “>Calc</button>
<div>{{ result }}</div>
<div>
<span*ngIf=“fieldOne.invalid”>左側のフィールドが空白です</span>
<br>
<span*ngIf=“fieldTwo.invalid”>右側のフィールドが空白です</span>
</div>
</form>
終わりに
①状態に応じてCSSが摘要される
クリックされた、値が変更された、バリデータの成功可否などの条件でCSSクラスが適用される。（下記表）
CSSクラスに装飾を設定することで、状態に応じて色をつけたり下線を表示したりできる。
クラス名 | 意味 |
ng-touched | クリックされていて、編集中であることを示す |
ng-untouched | クリックされていない状態を示す |
ng-valid | 値が有効である |
ng-invalid | 値が無効である |
ng-pending | バリデータの検証作業待ち |
ng-pristine | pristineとは「きれいな」という意味。入力内容が保持されていて、 今ページを閉じても問題ないことを示す |
ng-dirty | ユーザーがデータを編集したなどしていて、今ページを閉じると、 その変更が失われる状態を示す |
②バリデータを設定する
requiredなどのビルドインバリデータがあり、それを利用することで、正しく値が入力されたかどうかを判定できる。
③条件によって表示・非表示を変更する
条件によって表示・非表示に変更するには、「*ngIf」という属性を使う。
④条件によってクリックできないようにする
条件によってクリックできないようにするには「[disabled]」という属性を使う。
コメント