[Angular 4.0] formsモジュールの更新について

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


comments powered by Disqus