【Angularサンプルプログラム解説(2)】入力チェックについて

はじめに

前回に引き続き、Angularで作成したショッピングサイトをイメージしたサンプルアプリの解説を行います。

前回の解説はこちらを参照

【Angularサンプルプログラム解説(1)】ヘッダメニューについて

今回はサンプルアプリの入力チェックにポイントを絞って解説を行います。

こんな感じで作ってみました。

 

 

環境

  • OS:OS X 10.11 El Capitan
  • node:v8.1.0
  • Angular CLI:1.2.7
  • Visual Studio Code:1.13

 

前提

以下からソースコードを取得している前提で説明を行います。

ショッピングサイトサンプルプログラム

 

 

解説

以下の3点について解説していきます。

  1. 入力チェックに利用したモジュールについて
  2. 入力チェック内容の定義について
  3. 入力チェックメッセージの表示について

 

1.入力チェックに利用したモジュールについて

入力チェックは@angular/formsのFormControlValidatorsFormGroupFormBuilderを利用しました。

 

2.入力チェック内容の定義について

入力チェックを行う際、必須チェックや数値チェック、桁数チェックなど、どのようなチェックを行うかを定義する必要があります。

まずはどのようなチェックを行うかを定義している部分を確認していきます。

src/app/goods/goodsregist.component.ts
・
・
・
    // 入力フォーム入力チェック定義
    this.goodsForm = fb.group({
      // 商品名:必須チェック
      'goodsNm' : [null, Validators.required],
      // 値段:必須チェック
      'price' : [null, Validators.required],
      // 在庫数:必須チェック
      'stock' : [null, Validators.required],
      // 基本情報:必須チェック
      'basicInfo' : [null, Validators.required],
      // キーワード:入力チェックなし
      'keyword' : false,
      // 写真:入力チェックなし
      'picture' : false
    });
  }
・
・
・
MEMO
商品登録画面の各画面項目に対して入力チェック内容をそれぞれ定義しています。

上の例では商品名、値段、在庫、基本情報の画面項目に対して必須チェックを行うように定義しています。

 

今回のサンプルでは利用しませんでしたが、Validators.maxLength(10)で最大文字数チェックなども定義できます。

 

3.入力チェックメッセージの表示について

作成したサンプルでは、画面項目入力後のフォーカスアウト時、入力チェックがクリアできない場合は即時でエラーメッセージを出しています。

この部分について確認していきます。

src/app/goods/goodsregist.component.html
・
・
・
            <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>
・
・
・
MEMO
エラーメッセージを出力する条件は<md-error>タグのngIf属性に記載しています。

上の例では、画面項目にフォーカスインしたにも関わらず(goodsForm.controls[].touched)、各画面項目に設定した入力チェック内容がクリアできない(goodsForm.controls[].valid)場合に「入力してください」のメッセージを表示しています。

 

src/app/goods/goodsregist.component.html
・
・
・
                    <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>
・
・
・

 

MEMO

確認画面へのボタンの表示制御として、入力フォームグループ全体として入力チェッククリアできなければ非活性([disabled]=”!goodsForm.valid”)としています。

つまり、商品名、値段、在庫、基本情報の入力が完了できなければ次の画面へ遷移するためのボタンが押せないようにしています。

おわりに

Angularで画面項目の入力チェックについて解説しました。

@angular/formsを利用すればフロントエンドでの入力チェックが簡単にできることが分かりましたね。

 

JavaScriptでガリガリとチェックロジックを書くことなくTypeScriptの簡単な設定のみで、

画面項目の単項目チェックだけでなく、複数項目の相関チェックまでできました!!!!

 

JavaScriptでむちゃくちゃやってるソースをこれに置き換えてやりたいです。。。

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください