Angular Form Validation

一般的なフォーム検証命令
必須項目の検証
入力フォームが記入されているかどうかを判断するには、入力フィールドにHTML 5タグrequiredを追加するだけです.

もう1つのng-requiredは、この項目が必須かどうかを制御することができます.

最小値
フォームの入力値が最小値より大きいかどうかを確認し、入力フィールドにmin=「{number}」:

最大値
フォームの入力値が最大値以下であることを確認し、入力フィールドにmax=「{number}」:

最小長さ
フォームに入力されたテキストの長さが最小値より大きいかどうかを確認し、入力フィールドに命令ng-minlength=「{number}」を使用します.

最大長検証
フォームに入力されたテキストの長さが最大値以下であることを確認し、入力フィールドで命令ng-maxlength=「{number}」:

パターンマッチング
ng-pattern="/PATERN/"を使用して、指定した正規表現に一致するように入力します.

電子メール
入力内容が電子メールであるかどうかを確認します.inputのタイプをemailに設定すればいいです.

数値
入力内容が数値であることを確認し、inputのタイプをnumberに設定します.

URL
入力内容がURLであることを確認し、inputのタイプをurlに設定します.

エラー時にangularが追加したclass
フォームのステータス
応用するCSS
$invalid
ng-invalid
$valid
ng-valid
$pristine
ng-pristine
$dirty
ng-dirty
インストラクション
応用するCSS
requiredまたはng-required
ng-valid-requiredまたはng-invalid-required
min
ng-valid-minまたはng-invalid-min
max
ng-valid-maxまたはng-invalid-max
ng-pattern
ng-valid-patternまたはng-invalid-pattern
type="url"
ng-valid-urlまたはng-invalid-url
type="email"
ng-valid-emailまたはng-invalid-email
type="date"
ng-valid-dateまたはng-invalid-date
type="number"
ng-valid-numberまたはng-invalid-number
HTML 5のデフォルトフォーム検証を無効にする
formにnovalidateプロパティを追加すると、HTML 5に付属する検証を無効にできます.
フォーム内の各fieldのステータスの取得
未修正field
ユーザーがフィールドを変更したかどうかを示すブール値プロパティ.trueの場合、変更されていないことを示します.falseは変更されたことを示します.

formName.inputFieldName.$pristine;

修正されたfield
ユーザが実際に変更した場合にのみ、ブール型プロパティ.フィールドが有効かどうかにかかわらず、

formName.inputFieldName.$dirty;

検証済みフィールド
フィールドが検証されたかどうかを示すブール属性.通過するとtrueになります.

formName.inputFieldName.$valid

検証に失敗したフォーム

formName.inputFieldName.$invalid

$scopeでフォーム内の各フィールドのステータスを取得できるタイミング
Angularの検証はform命令とngModel協調によって行われた.検証コントロールにnameプロパティがない場合、formは取得されません.次にangularのソースコードから見てみましょう.
まずはngModel:

var ngModelDirective = function() {
     return {
       require: ['ngModel', '^?form'],
       controller: NgModelController,
       link: function(scope, element, attr, ctrls) {
         // notify others, especially parent forms
 
         var modelCtrl = ctrls[0],
             formCtrl = ctrls[1] || nullFormCtrl;
 
         formCtrl.$addControl(modelCtrl);
 
         scope.$on('$destroy', function() {
           formCtrl.$removeControl(modelCtrl);
         });
       }
     };
   };

ngModel命令はコンパイル時のpost link段階でformのaddControlメソッドによって親ノードのformのformコントローラに登録されることがわかります.ngModelController初期化コードを見てみましょう.

var NgModelController = ['$scope', '$exceptionHandler', '$attrs', '$element', '$parse', 
  function($scope, $exceptionHandler, $attr, $element, $parse) { 
    ....
   this.$pristine = true; 
   this.$dirty = false; 
   this.$valid = true; 
   this.$invalid = false; 
   this.$name = $attr.name;

ngModelの$name属性は式計算をサポートしていないことがわかります.FormControllerのaddControlコードは次のとおりです.

/**
     * @ngdoc function
     * @name ng.directive:form.FormController#$addControl
     * @methodOf ng.directive:form.FormController
     *
     * @description
     * Register a control with the form.
     *
     * Input elements using ngModelController do this automatically when they are linked.
     */
    form.$addControl = function(control) {
      // Breaking change - before, inputs whose name was "hasOwnProperty" were quietly ignored
      // and not added to the scope.  Now we throw an error.
      assertNotHasOwnProperty(control.$name, 'input');
      controls.push(control);

      if (control.$name) {
        form[control.$name] = control;
      }
    };

上から分かるように、ngModelは自分を登録していますが、ここでも登録に成功するとは限りません.ngModelは自分の$nameがあってこそ登録に成功することができます.