入力チェックする

フォームで入力されたものを即時にチェックする処理です。クライアント側で処理をするのでサーバーの負荷を軽減することができます。

<html ng-app>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>

 <form novalidate name="myForm">
  <p>名前:<input type="text" name="name" ng-model="name" required ng-minlength="2" ng-maxlength="5"></p>
  <p ng-show="myForm.name.$error.required">未入力</p>
  <p ng-show="myForm.name.$error.minlength">2文字未満</p>
  <p ng-show="myForm.name.$error.maxlength">5文字を超えている</p>
 </form>
</html>
	

入力チェックするデモ

名前:

未入力

2文字未満

5文字を超えている

解説

重要なポイント

  • novalidate,ng-model,ng-show
  • required(空チェック)
  • ng-minlength(最小文字数チェック)
  • ng-maxlength(最大文字数チェック)
  • [form名].[input名].$error.[エラー判定定義]

[novalidate]はhtml5の入力チェックを無効化します。[ng-model]で入力した情報をnameに格納しています。[ng-show]は値がtrueのとき表示、falseのとき非表示にします。

一番のポイントは、[form名].[input名].$error.[エラー判定定義]でエラー判定します。

(例)form name="hoge",input="huga",空判定の場合、hoge.huga.$error.required となります。