jQueryだと面倒なバリデーションをかなり楽にやってくれます。これは結構いいかな。Form作る時なんかはこれがいいですね。
よく使う項目なのでコントローラすらいらないというすぐれものです。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のバリデーションができるというわけです。どのようにバリデーションするのかというルールはその後ろにパラメーターとしていろいろ付けることができます。
| code | discription | |
|---|---|---|
| required (ng-required) | 必須項目 | |
| ng-maxlength | 最大長 | ng-maxlength=”256″ |
| ng-minlength | 最短長 | ng-minlength=”256″ |
| ng-pattern | 正規表現 | ng-pattern=”/^[a-zA-Z0-9]*$/” |
これぐらいあれば、もう殆どいらないです。（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を個別に取得できます。
とはいっても内部的なエラーの値を使うには、
参考: https://tsuchikazu.net/angularjs-validation/