Angular 4.0ではformsモジュールにいくつかの変更が入っています。 追加された新機能と、新しいNgFormの挙動について解説します。
emailバリデータの追加
新たに組み込みのemailバリデータが追加され、input[type=email]要素の値が正しくメールアドレスの文字列になっているかどうか、NgFormがチェックするようになります。 組み込みバリデータなのでこの機能を使うために特別な記述は必要ありません。
equalsToバリデータの追加
こちらが目玉の機能です。 equalsToバリデータは、入力された値が特定のコントロールの値と同じかどうかを検査してくれるものです。 メールアドレスの確認など、同じ内容を2回入力させるようなフォームで有用です。 使い方は次のようになります。equalsTo属性の右辺には一致させたいコントロールの 絶対パス を設定します。
<form>
<input type="email" name="mail">
<input type="email" name="mailConfirm" equalsTo="mail">
</form>もしフォームのモデルが入れ子構造になっているのなら、.でパスの階層を表現します。
<form>
<div ngModelGroup="user">
<input type="email" ngModel name="mail">
<input type="email" ngModel name="mailConfirm" equalsTo="user.mail">
</div>
</form>デフォルトでnovalidateが付与されるようになる
Angular 4.0からは、テンプレート中の<form>には自動的にnovalidate属性が付与されるようになります。 これはブラウザ間でのバリデーションの挙動の差を生まないため、formsモジュールが提供するバリデータだけが動作するための変更です。
もちろん元の挙動に戻すことは可能です。ngNativeValidateディレクティブを<form>タグに付与することで2系の挙動になります。
<form ngNativeValidate>まとめ
-
emailバリデータの追加 -
equalsToバリデータの追加 -
novalidateのデフォルト化と、ngNativeValidateによる回避
次回はcoreモジュールやテンプレートシンタックスに関する変更について解説する予定です。
Angular 4.0 Features