この記事を読むのに必要な時間は約 13 分です。
はじめに
前回に引き続き、Angularで作成したショッピングサイトをイメージしたサンプルアプリの解説を行います。
前回の解説はこちらを参照
今回はサンプルアプリの入力チェックにポイントを絞って解説を行います。
こんな感じで作ってみました。
環境
- OS：OS X 10.11 El Capitan
- node：v8.1.0
- Angular CLI：1.2.7
- Visual Studio Code：1.13
前提
以下からソースコードを取得している前提で説明を行います。
解説
以下の3点について解説していきます。
- 入力チェックに利用したモジュールについて
- 入力チェック内容の定義について
- 入力チェックメッセージの表示について
１．入力チェックに利用したモジュールについて
入力チェックは@angular/formsのFormControl、Validators、FormGroup、FormBuilderを利用しました。
２．入力チェック内容の定義について
入力チェックを行う際、必須チェックや数値チェック、桁数チェックなど、どのようなチェックを行うかを定義する必要があります。
まずはどのようなチェックを行うかを定義している部分を確認していきます。
・
・
・
// 入力フォーム入力チェック定義
this.goodsForm = fb.group({
// 商品名：必須チェック
'goodsNm' : [null, Validators.required],
// 値段：必須チェック
'price' : [null, Validators.required],
// 在庫数：必須チェック
'stock' : [null, Validators.required],
// 基本情報：必須チェック
'basicInfo' : [null, Validators.required],
// キーワード：入力チェックなし
'keyword' : false,
// 写真：入力チェックなし
'picture' : false
});
}
・
・
・
上の例では商品名、値段、在庫、基本情報の画面項目に対して必須チェックを行うように定義しています。
今回のサンプルでは利用しませんでしたが、Validators.maxLength(10)で最大文字数チェックなども定義できます。
３．入力チェックメッセージの表示について
作成したサンプルでは、画面項目入力後のフォーカスアウト時、入力チェックがクリアできない場合は即時でエラーメッセージを出しています。
この部分について確認していきます。
・
・
・
<h2>商品情報入力</h2>
<form [formGroup]="goodsForm">
<table>
<tr>
<md-input-container>
<input mdInput placeholder="商品名（必須）" [formControl]="goodsForm.controls['goodsNm']" maxlength="255" [(ngModel)]="goods.goodsNm">
<md-error *ngIf="!goodsForm.controls['goodsNm'].valid && goodsForm.controls['goodsNm'].touched">
入力してください
</md-error>
</md-input-container>
<br/>
<br/>
</tr>
<tr>
<md-input-container>
<input mdInput type="number" placeholder="値段（必須）" [formControl]="goodsForm.controls['price']" maxlength="8" [(ngModel)]="goods.price">
<md-error *ngIf="!goodsForm.controls['price'].valid && goodsForm.controls['price'].touched">
入力してください
</md-error>
</md-input-container>
<br/>
<br/>
</tr>
・
・
・上の例では、画面項目にフォーカスインしたにも関わらず(goodsForm.controls[].touched)、各画面項目に設定した入力チェック内容がクリアできない(goodsForm.controls[].valid)場合に「入力してください」のメッセージを表示しています。
・
・
・
<tr>
<label>画像</label>
<fancy-image-uploader [options]="options" (onUpload)="onUpload($event)"></fancy-image-uploader>
<md-input-container class="hidden">
<input mdInput placeholder="画像" class="hidden" maxlength="255" [(ngModel)]="goods.picture" [ngModelOptions]="{standalone: true}">
</md-input-container>
<br/>
<br/>
</tr>
<tr>
<button md-raised-button [disabled]="!goodsForm.valid" color="primary" (click)="goodsPassSet()" routerLink="/goodsregistconfirm" >確認画面へ</button>
</tr>
</table>
</form>
・
・
・
確認画面へのボタンの表示制御として、入力フォームグループ全体として入力チェッククリアできなければ非活性([disabled]=”!goodsForm.valid”)としています。
つまり、商品名、値段、在庫、基本情報の入力が完了できなければ次の画面へ遷移するためのボタンが押せないようにしています。
おわりに
Angularで画面項目の入力チェックについて解説しました。
@angular/formsを利用すればフロントエンドでの入力チェックが簡単にできることが分かりましたね。
JavaScriptでガリガリとチェックロジックを書くことなくTypeScriptの簡単な設定のみで、
画面項目の単項目チェックだけでなく、複数項目の相関チェックまでできました！！！！
JavaScriptでむちゃくちゃやってるソースをこれに置き換えてやりたいです。。。
コメントを残す