サンプルはこちら。
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">３文字以上にしてください。</span>
<span ng-show="myForm.name.$error.maxlength">８文字以下にしてください。</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コーダーレベルでも扱うことができます。
