ES5で書くAngular v2（６）「フォームバリデーション」

※現在この方法は推奨されません

今回はngFormを使ったフォームバリデーションをやってみます。

基本形

フォームにngControlディレクティブとngFormのテンプレート変数を追加します。
そして、テンプレート変数の.validの値をチェックすることでエラーの判定ができます。

文字が未入力だと警告を出すサンプル

<form novalidate>
    <input type="text" ngControl="title" #title="ngForm" required>
    <div [hidden]="title.valid">内容を入力してください</div>
</form>

#titleの部分は、テンプレート内でのみ有効な"title"という名前の変数 を定義しています。
ngControlに設定する名前はテンプレート変数と同じである必要はないようです。

ダーティチェック

.dirtyや.pristineを使うとダーティチェックも可能です。

文字を入力した後に全て削除すると警告を出すサンプル

<form novalidate>
    <input type="text" ngControl="title" #title="ngForm" required>
    <div [hidden]="title.valid || title.pristine">内容を入力してください</div>
</form>

• .dirty
  フォームの内容を変更したときtrue
• .pristine
  フォームにまだ手を付けていない状態のときtrue

フォーム全体のバリデーション

form要素にテンプレート変数を設定するとフォーム全体のエラーを検知することができます。

二つのテキストボックスに文字を入力した場合のみボタンを表示するサンプル

<form #form="ngForm" novalidate>
    <input type="text" ngControl="title" #title="ngForm" required />
    <input type="text" ngControl="subtitle" #subtitle="ngForm" required />
    <button [hidden]="!form.valid">Add</button>
</form>

まとめ

ngFormを使ってフォームのバリデーションができるようになりました。

前回のサンプルと組み合わせると「バリデーションエラーが出たらスタイルを変更する」ということもできそうです。

AngularJS(v1.x)系の書き方よりも独特なものになっていますが、テンプレート変数は便利なので早く使いこなせるようになりたいところです。