こんにちは！ぐちです。

バリデーションとは

バリデーションとはプログラミングにおいてフォームなどに入力された文字列が入力規則に対して妥当に記述されているかどうかを検証する仕組みを指します。他にも様々な使われ方をしますが、ここでは前述の意味を指しています。

AngularJSでは

非常に多くのバリデーションを仕組みを簡単にかつシンプルに実装できる仕組みが用意されています。順番にご紹介します。

下準備

まずはバリデーションを使うためにform要素で囲みname属性を記述します。またHTML5のバリデーションを動作させないためにnovalidate属性も合わせて書いておきます。

<form name="myForm" novalidate>
</form>

バリデーションをする対象のinput要素も追加しておきます。name属性とng-model属性が必要ですので合わせて記述します。

<input type="text" name="username" ng-model="username">

バリデーションルールの追加

AngularJSのバリデーションでは基本的にinputなどの入力要素に属性を追加していきます。必須入力と最大文字数を20にした場合は下記のようになります。

<input type="text" name="username" ng-model="username" required ng-maxlength="20">

エラーの表示

ここまでくればあとはどのバリデーションで引っかかったかを参照するだけですが、それらは上記の例でいくとmyFromのusernameの$errorで参照することができます。

{{ myForm.username.$error }}
// 上記のオブジェクトは下記のように値が格納されています。
{"required":true,"maxlength":false}

バリデーションの種類に応じてエラーメッセージをng-showを使って表示します。

<span ng-show="myForm.username.$error.required">入力必須項目です</span>
<span ng-show="myForm.username.$error.maxlength">最大文字数を超えています</span>

複数バリデーションを扱う

1つの要素に対して複数のバリデーションルールを設定した際に上記のようにng-showで表示条件を書くと冗長的になってしまったり最初のエラーのみを表示したい場合に複雑な条件を記述する必要が出てきます。

そんな場合に便利なのがng-messagesです。

<form name="myForm">
  <input type="text"　name="username" ng-model="username" ng-minlength="5" ng-maxlength="20" required />

  <div ng-messages="myForm.username.$error" style="color:#0000ff">
    <div ng-message="required">入力必須項目です</div>
    <div ng-message="minlength">最小文字数に足りません</div>
    <div ng-message="maxlength">最大文字数を超えています</div>
  </div>
</form>

エラー表示のタイミング

上記のままでは常にエラーメッセージが表示されてしまうのでフォームが送信されたタイミングで表示するように修正します。

フォーカスが当たりフォームが送信されたタイミングでエラー表示をするにはng-if属性で条件を指定します。

<form name="myForm">
  <input type="text"　name="username" ng-model="username" ng-minlength="5" ng-maxlength="20" required />

  <div ng-messages="myForm.username.$error" style="color:#ff0000"
      ng-if="myForm.username.$touched && myForm.$submitted">
    <div ng-message="required">入力必須項目です</div>
    <div ng-message="minlength">最小文字数に足りません</div>
    <div ng-message="maxlength">最大文字数を超えています</div>
  </div>
</form>

上記の他にも様々な条件を指定することができますのでぜひググってみてください！笑

まとめ

AngularJSを始めとするフレームワークには便利な機能が標準で用意されていることがほとんどです。上記でご紹介した通りのことを標準の機能を使わずとも実現することは可能ですが、製造コストとしては非常にもったいないですよね。

うまく標準機能を活用してスピード感を持って作業を進めていってもらえればと思います。

では今回はこの辺で。