AngularJS:フォームのバリデートとエラー表示

goto_jp 835views 更新:2014年4月25日

サンプルはこちら。
http://codepen.io/KazuyoshiGoto/pen/oFqep

前回つくったフォームをもとにバリデート処理を加えました。

HTML

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<body ng-app>
  <div ng-controller="mainCtrl">
    <form novalidate name="myForm">
      <input type="text" name="name" ng-model="user.name" placeholder="name" required ng-minlength="3" ng-maxlength="8" />
      <span ng-show="myForm.name.$error.required">必須です。</span>
      <span ng-show="myForm.name.$error.minlength">3文字以上にしてください。</span>
      <span ng-show="myForm.name.$error.maxlength">8文字以下にしてください。</span>
    </form> 
    <pre>{{user|json}}</pre>
  </div>
</body>

5行目のフィールドに下記3点のバリデート用のプロパティを加えています。
「required」「ng-minlength」「ng-maxlength」

その下に「ng-show」のプロパティを加えたエラーメッセージを記述しています。
それぞれこのフォーム(myForm)内のフィールド(name)の各バリデートプロパティに対応し、エラーであれば表示します。

10行目でフィールドの値を表示させていますが、バリデートエラー時は値が格納されないことが分かります。

JavaScript

var mainCtrl = function($scope) {
}

前回同様にコントローラーの宣言をしているだけです。
イベントやバリデートをプロパティ側で制御しているのでHTMLコーダーレベルでも扱うことができます。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません