Angular Webアプリ開発入門９

はじめに
終わりに

はじめに

前回はテキストボックスが未入力の時は「赤色の下線」、入力されたら「緑色の下線」の表示を行った。今回は下記を実施する。

未入力のとき「左側のフィールドが空白です」や「右側のフィールドが空白です」といったメッセージを表示する
未入力のときはボタンがクリックできないようにする

条件によって表示・非表示を切り替える

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]=”条件式“」である。次のように記述すると、条件は満たされないときに、ボタンがクリックできないようになる。

どちらかが未入力のときにボタンを無効にするには、「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>

ただし、フォームを構成する場合はそのなかにある入力フィールドには、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	ユーザーがデータを編集したなどしていて、今ページを閉じると、その変更が失われる状態を示す