~Linux、MySQLからAJAXまでAngular2でフォームのバリデーションチェック、動的にCSS追加Angular2でフォームのバリデーションチェック、動的にCSSの追加を行い、エラー時に色を変えたり、メッセージを表示する方法をまとめました。※Angular2の2.0.0版、TypeScriptを使って確認したものです。(デモはv4.4.3、v2.0.0で動作確認)※目次をクリックすると目次の下部にコンテンツが表示されます。1.FormsModuleのインポート2.NgModelディレクティブを使ったシンプルなフォーム作成例(バリデーションチェックなし)3.バリデーションチェック、動的にCSS追加4.フォームの作成方法5.デモFormsModuleのインポートAngular2のフォームの機能を使用する場合、別途フォームのモジュールをインポートする必要があります。一般的なAngular2のフォーム機能を使用する場合、FormsModuleをインポートします。※ダイナミックフォームを使用する場合は、ReactiveFormsModuleをインポートする。:NgModelディレクティブを使ったシンプルなフォーム作成例(バリデーションチェックなし)NgModelディレクティブによる2Wayバインディングを使い、バリデーションチェックなしのファーム作成例を示します。}}バリデーションチェック、動的にCSS追加1)<form>タグとNgFormディレクティブ・FormsModuleをインポートすると、<form>タグ指定時にこのディレクティブはデフォルトでアクティブになる。明示的にセレクターを追加する必要はない。・NgFormディレクティブは、FormGroupインスタンスを生成してフォームとバインドし、フォームの値とバリデーションステータスを追跡する。・以下のように記述することによって#myForm=”ngForm”ディレクティブをテンプレートリファレンス変数にエクスポートすることができる。テンプレートビュー内でこのテンプレートリファレンス変数を使ってフォーム内の各フォームコントロールの値、バリデーションステータスにアクセスすることができる。・ユーザーがフォームの送信を行うとNgSubmitイベントが発火する。・フォームコントロールの値は、ngFormのvalue属性でJSONオブジェクトとして参照できる。2)FormControlオブジェクト・Angular2のフォームシステムでは、input要素などのフォームコントロールはFormControlオブジェクトによって扱われる。・FormControlオブジェクトは、各フォームコントロールの入力値、バリデーション状態などを保持する。・テンプレートビュー内でNgModelディレクティブを使用すると自動的に生成される。・コンポーネントクラス内で明示的に定義することもできる。Validators.required);※詳細は以下の記事参照Angular2でカスタムバリデート、カスタムフォーム●フォームコントロールの状態遷移フォームが最初に表示されてからユーザーがフォームに入力し終わるまでの間の各状態を管理する。※詳細はスーパークラスのAbstractControlを参照。・validコントロールの値がvalid・invalidコントロールの値がinvalid●動的に追加されるCSSクラス各フォームコントロールの状態に応じて以下のCSSクラスを動的に追加する。ng-untouched、ng-touched、ng-pristine、ng-dirty、ng-valid、ng-invalid●バリデーションチェック・デフォルトで以下のバリデーションチェックがサポートされる。required、minlength、maxlength、pattern・上記バリデーションチェック時のエラーメッセージは”errors”オブジェクトにキー(required、minlength、maxlength、pattern)とエラーメッセージのペアで保持される。3)NgModelディレクティブ・ドメインモデルからFormControlインスタンスを生成し、テンプレートビューのフォームのコントロール要素とバインドさせる。・<form>タグ内でngModelを使用する場合、フォームコントロールに”name”属性を指定する必要があり、このname属性で指定した名前を使って親フォームのコントロールに登録して、アクセスする。・FormControlインスタンスのバリデーションステータスをチェックしたい場合、以下のようにローカルテンプレート変数にエクスポートする事によって、テンプレートビュー内でローカルテンプレート変数を介してバリデーションステータスを取得することができる。#myVar=”ngModel”このとき、ディレクティブの”control”属性を使ってコントロールにアクセスすることができるが、”valid”や”dirty”などの多くの属性は”control”を介して指定しなくても直接指定することも出来る。(この属性についてはAbstractControlDirectiveに定義されている。)・ドメインから初期値をフォームの初期値として指定する場合、リアルタイムにドメインと同期させたい場合は、NgModelを1way、2Wayデータバインディングで利用する必要がある。・フォームで送信したデータは、NgFormのvalue属性でJSONオブジェクトとして参照できる。各フォームコントロールは、name属性で指定した名前でアクセスできる。#userForm=”ngForm”>テンプレートリファレンス変数に”ngForm”を指定。ngModel>テンプレートリファレンス変数”v_name”に”ngModel”を指定する事によって、FormControlオブジェクトのインスタンスにアクセスでき、コントロールのバリデーション状態を取得できる。例)テンプレートリファレンス変数”v_name”を介してバリデーション結果を取得。</span></div>5フォーム全体のバリデーションチェック例)テンプレートリファレンス変数”userForm”を介してフォーム全体のバリデーションチェック結果を取得。#userForm=”ngForm”>デモ●サンプルコードの補足1各フォームコントロールのCSS・valid、invalid、dirtyの状態に応じてテキストボックスの色を変化させるため、以下のCSS設定を追加。lightpink;}・エラーメッセージをBootstrap3のtext-dangerクラスを使って文字色などを設定。NgIfディレクティブ、[hidden]を使って各フォームコントロールのバリデーションがエラーの場合のみエラーメッセージを表示。・フォームの各入力項目は必須項目なので”required”を指定。・会員名は、英半角大文字の5~10文字に制限。/>3フォーム全体のCSS・初期状態は背景色無し。すべての入力項目が正常に入力されたらフォーム全体の背景色をライトグリーン。正常の状態で無い場合はライトピンク。フォーム全体の状態に応じて自動でCSSを追加する機能は無いようなので、NgClassディレクティブを使って’form-valid’、’form-invalid’というCSSクラスを動的に追加。‘form-invalid'”>4NgModelディレクティブを使用する場合コンポーネントクラス内のモデルデータとテンプレートをバインドさせる場合は、NgModelディレクティブで2Wayバインドさせる。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。