angular.jsをやってみる (26) - ngMessages -

公式リファレンス: https://docs.angularjs.org/api/ngMessages

要は入力フォームなどの検証メッセージを表示ような要件なUIをサポートしたりするようなライブラリな模様(※angular1.3.x系からの物な模様。1.2.x系のドキュメントには無いので)

app.js

angular.module("sample", ["ngMessages"])
  .controller("SampleController", function($scope) {
  });

特に特記する事無いがngMessagesなngなモジュールを指定しておく必要あり

index.html

<html ng-app="sample">
  <head>
    <script src="angular.js"></script>
    <script src="angular-messages.js"></script>
    <script src="main.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>
    <div ng-controller="SampleController">
      <form name="myForm">
        <!-- requiredとminlengthな検証ルールを付けておく -->
        <input type="text" ng-model="field" name="myField" required minlength="2" />
        <button>click</button>

        <!-- フィールドによって検証状態に問題が無いかは$validをチェックすれば良いっぽい -->
        <div ng-if="myForm.myField.$valid">
          <div>OK</div>
        </div>

        <div class="error-messages" ng-messages="myForm.myField.$error" ng-messages-include="error-messages">
          <!-- ng-templateで指定されているのを定義するとオーバーライドされる模様 -->
          <div ng-message="required">入力しろやボケ</div>
          <div ng-message="minlength">足りへんぞ</div>
        </div>
        <script type="text/ng-template" id="error-messages">
          <!-- 使われない。上記でng-message="required"でオーバーライドされてる為 -->
          <div ng-message="required">This field required!</div>
        </script>
      </form>
    </div>
  </body>
</html>

ng-messagesが設定されているエレメントに対するCSSクラスにおいて

メッセージが表示される場合は.ng-active
メッセージが非表示に切り替わる場合は.ng-inactive

というようにngAnimateによるsetClass等が行われる模様なので、アニメーション処理をしたいような場合だと状態に対応するCSSクラスにアニメーション処理をするようなCSS定義をする事も可能っぽい

ってな感じで基本的にドキュメント読んだ方が早いような気がするけど一応メモ