AngularJSでバリデーションする

jQueryだと面倒なバリデーションをかなり楽にやってくれます。これは結構いいかな。Form作る時なんかはこれがいいですね。

Emailのバリデーション

よく使う項目なのでコントローラすらいらないというすぐれものです。angular.min.jsを呼んであげるだけであとはHTMLを操作するだけでOKです。
コントローラを使わなくていいのは、AngularJSがすでに内部的にコントローラをもっていてそれにセットされるからです。

<div>
    <form action="" name="userForm" novalidate>
    <input type="email" name="email" ng-model="email" required ng-maxlength="256">
    <span ng-show="userForm.email.$error.required">入力してください。</span>
    <input type="submit" name="submit">
    </form>
</div>

このコードの意味を冗長に説明すると、まずはformタグ内にnovalidateを入れておきます。HTML5のバリデーション機能の無効にするためのものです。これ入れないとHTML5が各所で悪さをします。
次に、formのnameに適当なものを入れてあげます。これはこのform内で使う名前になります。
inputではemailに対して、ng-model=”email”を使います。これでemailのバリデーションができるというわけです。どのようにバリデーションするのかというルールはその後ろにパラメーターとしていろいろ付けることができます。

これぐらいあれば、もう殆どいらないです。（emailの場合はemailのバリデーションを行ってくれるのでpatternもいらないです。うわ、便利だ。

エラーメッセージを出す

エラーは$errorでそのまま受けることができます。上記の場合はformの名前がuserFormなので、

{{userForm.email.$error}}

でエラーメッセージを受けることができます。
これは実際にやってみればわかるのですが、この$errorには初期値として{“required”:true}が入っています。必須項目が有効になってますよという意味です。で次に適当なひらがなとかを入れると、{“email”:true}になります。ng-model=”email”でemailのバリデーションを行っているので、emailとして有効じゃないとダメだという意味です。次に正しいemailをいれつつも256文字以上入力すると、{“maxlength”:true}になります。最大長のバリデーションが有効になっているということです。
こんな風にして複数のバリデーションのエラーを受けることができるようになっています。
が、これだと非常に使いづらいのでエラーを個別に取得することもできます。

{{userForm.email.$error.required}}
{{userForm.email.$error.ng-maxlength}}

ほとんど予想通りというところですが、上記のように$errorを個別に取得できます。

日本語のエラーメッセージ

とはいっても内部的なエラーの値を使うには、

demo

参考: https://tsuchikazu.net/angularjs-validation/