「Angular 2」のデータバインディングとディレクティブ記述法

次世代Webアプリケーションフレームワーク「Angular」の活用 第2回

フォームとバリデーター

　Angular 2では、フォームの機能を拡張するディレクティブにより、入力検証用のバリデーターなど便利な機能が利用できます。

Angular 2の流儀でフォームを記述

　Angular 2のフォームとバリデーターを利用する例をリスト11に示します。

リスト11　Angular 2の機能を利用したフォーム（angular2-004-form/app/app.component.ts）

<!-- ngForm形式でフォームを記述 ...（1）-->
<form #myForm="ngForm" (ngSubmit)="onSubmitForm(myForm)" novalidate>

  <h4>名前</h4>
  <!-- 必須バリデーター ...（2）-->
  <input type="text" name="familyName"
    [(ngModel)]="formData.familyName" required>
  <input type="text" name="givenName"
    [(ngModel)]="formData.givenName" required>

  <h4>年齢</h4>
  <!-- パターンバリデーター ...（3）-->
  <input type="text" name="age"
    [(ngModel)]="formData.age" pattern="1?[0-9]{0,2}">歳

  <h4>趣味</h4>
  <!-- 最短長バリデーター ...（4）-->
  <input type="text" name="hobby"
    [(ngModel)]="formData.hobby" minlength="4">

  <div style="margin-top:20px">
    <button type="submit">フォーム送信</button>
  </div>
</form>

　（1）がフォームの定義です。「#myForm="ngForm"」記述は、このフォームをAngular 2のフォームとしてmyFormという名前で定義することを表します。また(ngSubmit)属性はフォームがサブミットされた時のイベントです。novalidateはAngular 2ではなくHTML5の属性で、HTML5のバリデーター機能を無効にしてAngular 2のバリデーターと干渉しないように設定しています。

　（2）は必須バリデーターを指定する例です。required属性で必須バリデーターが有効になります。（3）はバリデーターに入力パターンを指定する例です。pattern属性に正規表現でパターンを指定します。（4）はバリデータとして文字列の最短の長さを指定する例です。minlength属性に最短の長さ4を指定しています。なお最長の長さをmaxlength属性で指定することもできます。

　（2）〜（4）には[(ngModel)]属性により双方向データバインディングが設定されています。対応する変数formDataはコンポーネントにリスト12のように記述します。

リスト12　フォームの初期値（angular2-004-form/app/app.component.ts）

formData = {
  familyName: "山田",
  givenName: "太郎",
  age: 40,
  hobby: "映画鑑賞"
};

フォーム要素に自動適用されるCSSクラス

　Angular 2のフォームを利用すると、テキストボックスなどのフォーム要素に表1のCSSクラスが自動的に適用されます。これらのクラスにスタイルを定義することで入力エラーなどを表示できます。

表1　Angular 2のフォーム要素に自動適用されるCSSクラス

要素の状態	クラス
コンポーネントを一度も操作していない	ng-untouched
コンポーネントを1回以上操作した	ng-touched
値が変更されていない	ng-pristine
値が変更された	ng-dirty
バリデーターが正しい値と判断	ng-valid
バリデーターが誤った値と判断	ng-invalid

　リスト11、12を含むサンプルコード（angular2-004-form）では表1のCSSクラスを設定して、以下のように表示されるようになっています。

• テキストボックスを1回選択すると灰色の背景になる
• テキストボックスの値を変更すると文字が斜体になる
• テキストボックスに誤った値を入力すると赤枠が表示される

図5　フォームとバリデーターの表示（angular2-004-form）

　サブミットボタン押下時の処理onSubmitFormはリスト13です。Angular 2のフォームオブジェクトformから、validプロパティでフォーム全体の検証結果を取得して、処理を切り替えています。

リスト13　フォームサブミット時処理（angular2-004-form/app/app.component.ts）

onSubmitForm(form) {
  // フォームが誤った値の場合はエラー表示してサブミット中止
  if (!form.valid) {
    alert("Validatorエラー発生");
    return false;
  }
  // フォームが正しい値の場合はサブミット
  form.submit();
}

　なお、リスト11〜13と同じ動作をするAngularJS 1の実装例は、ダウンロードできるサンプルコード（angularjs1-samples/004-form.html）に含まれています。

参考　Angular 2のディレクティブを定義する記号

　本記事で説明したAngular 2のディレクティブで使用されていた記号とその意味を表2に示します。

表2　Angular 2のディレクティブで用いる記号と意味

No.	記号	意味
1	[( )]	双方向データバインディング
2	( )	イベントハンドラ
3	[ ]	属性値の設定
4	*	テンプレート
5	#	変数の定義

　No.1はリスト2の[(ngModel)]、No.2はリスト5の(click)で説明しました。No.3はリスト9の[ngStyle]でCSSを指定するときに利用しています。No.4はリスト9の*ngFor、*ngIfで利用しており、ngFor、ngIf属性が指定された要素を内部的にテンプレートとして取り扱い、繰り返しで複数回表示したり、条件分岐で表示／非表示を切り替えたりしています。No.5の変数定義はリスト11の「#myForm="ngForm"」記述で、フォームを変数myFormで参照するために用いています。

　AngularJS 1では、ng-modelは双方向データバインディング、ng-clickがクリックのイベントハンドラといったように、ディレクティブ名だけで意味を定義していましたが、Angular 2ではディレクティブ名に付加される記号で意味が統一的に把握できるようになりました。

まとめ

　本記事では、AngularJSの特徴的な機能であるデータバインディングやディレクティブを「Angular 2」で利用する方法を説明しました。今回紹介した範囲でAngular 2とAngularJS 1の記述を比較すると表3のようになります。

表3　Angular 2とAngularJS 1の記述比較

種類	Angular 2	AngularJS 1
片方向データバインディング	{{ }}	{{ }}
双方向データバインディング	[(ngModel)]	ng-model
イベント	(イベント名)	ng-イベント名
繰り返しディレクティブ	*ngFor	ng-repeat
条件分岐ディレクティブ	*ngIf	ng-if
スタイル指定	[ngStyle]	ng-style

　片方向データバインディングは同一記述ですが、それ以外は記述形式が異なります。名前が似ていて類推できるものが多いですが、*ngForとng-repeatのように名前から異なっているものもあります。とはいえ基本的な処理の考え方はAngularJS 1がベースになっているため、Angular 2のAPIリファレンスを参照してAngularJS 1との対応関係を把握すれば、比較的早く習熟できるでしょう。

参考資料

• Angular 2
• AngularJS