13フォーム検証

フォーム検証
組み込みフォーム検証命令
Angularは、(text,number,url,email,radio,checkbox)、および検証のための命令(required,pattern,minlength,maxlength,min,max)のいくつかの一般的なhtml 5入力コントロールの検証実装を提供します.ここでは、パターンマッチングng-pattern命令のみを説明する.ng-pattern="/PATTERN/"を使用して、指定した正規表現に一致するように入力します.
注意:HTMLフォームのプロパティnovalidateを使用して、ブラウザのデフォルトの検証を無効にします.
フォームのプロパティ
ツールバーの
説明
対応するCSSスタイル
$dirty
フォームに記入記録があります
.ng-dirty {}
$valid
フィールドの内容
.ng-valid {}
$invalid
フィールドの内容が不正です
.ng-invalid {}
$pristine
フォームに記録が記入されていません
.ng-pristine {}
$error
現在のフォームのすべての検証内容と、それらが合法かどうかの情報.検証に失敗した場合、この属性の値はtrueです.値がfalseの場合、入力フィールドの値が検証されたことを示します.formName.inputFieldName.propertyを使用して入力ボックスの内容を検証するか、formName.propertyを使用してフォーム全体のすべての入力ボックスの内容を検証できます.
ngModel.NgModelController
1つのフォームは、FormControllerのインスタンスです.api/ng.directive:ngModel命令を有する入力制御であって、NgModelController例を含む.
ngModel.NgModelControllerはng-model命令にAPIを提供した.このコントローラには、データバインディング、検証、CSS更新サービス、および値のフォーマットおよび解析が含まれます.論理処理、DOMレンダリング、またはリスニングイベントは含まれていません.このようなDOMに関連する論理は、他のNgModelControllerを用いたデータバインド命令によって提供されるべきである.
方法
$render();
ビューを更新する必要がある場合に呼び出されます.
$isEmpty(value);
inputの値が空であるかどうかを判断する必要がある場合に実行できます.たとえば、inputの値が存在するかどうかは、必要なコマンドがこの関数を実行します.デフォルトの$isEmpty関数は、値がundefined、null、またはNaNであるかどうかを確認します.
Value:参照を確認します.
$setValidity(validationErrorKey,isValid);
有効性のステータスを変更し、フォームの現在のコントローラの有効性が変化したことを通知します.(ベリファイアが無効とマークされている場合は、フォームに通知しません.)
このメソッドは、検証が必要な場合に呼び出されます.すなわち、アナライザまたはフォーマット機能です.
validationErrorKey:ベリファイアの名前.validationErrorKeyは$error[validationErrorKey]=isValidに割り当てられ、データバインドが可能になります.
isValid:現在のステータスがvalid(true)またはinvalid(false)かどうか.
$setPristine();
コントローラの初期化状態を設定します.
$setViewValue(value);
ページの値を更新します.
ページの値が変化すると、このメソッドが呼び出されます.
value:ページの値.
属性:
$viewValue
ページ上の実際の文字列値.
$modelValue
モデル内のコントローラにバインドされている値.$modelValueはデータモデルによって保持される.$modelValueおよび$viewValueは、$parserのパイプラインが動作しているかどうかによって異なる場合があります.
$parsers
実行される機能配列は,コントローラとしてDOMから値を読み出すパイプである.各関数は次の関数に値を渡すように呼び出され、最後にモデルを埋め込むために値を返します.値の浄化/変換または検証に使用します.検証のために、解析器は$setvalidity()を使用して有効な状態を更新し、定義されていない無効な値を返す必要があります.
$formatters
実行される機能の配列は、コントローラとしてDOMから値を読み出すパイプです.各関数は次の関数に値を渡すように呼び出され、最後にモデルを埋め込むために値を返します.コントローラと認証に表示される値をフォーマット/変換します.
$viewChangeListeners
ページの値が変化すると実行される関数の配列.パラメータは実行されず、戻り値は無視されます.これは、モデル値の追加のリスニングの代わりに使用できます.
$error
すべてのエラーを持つhashオブジェクト.
$pristine
ユーザーがコントローラと対話していない場合はtrueです.
$dirty
ユーザーがコントローラと対話している場合はtrueです.
$valid
エラーがなければtrueです.
$invalid
コントローラに少なくとも1つのエラーがある場合はtrueです.
カスタム認証
フォームの検証は2つのタイミングでトリガーされます.

データのビューへの更新-制約されたモデルが変更されると、NgModelController#$formatters配列内のすべてのメソッドがパイプ式に呼び出されます(すなわち、次から次へと呼び出されます).これにより、すべてのメソッドが値をフォーマットしてフォームとコントロールの有効性状態を変更する機会があり、NgModelController#$setValidityを呼び出すことで実現されます.

は、データの更新を表示する-同様に、ユーザがコントロールと対話するときにNgModelController#$setViewValueを呼び出す.これはまた、NgModelController#$parsers配列中のすべてのメソッドを逆管式で呼び出し、これにより、すべてのメソッドが値を変換してフォームとコントロールの有効性状態を変更する機会があり、NgModelController#$setValidityによって実現される.

$parsers $parsers配列を使用することは、カスタム検証を実現する方法の1つです.たとえば、入力値が2つの数値の間にあることを確認したい場合、$parsers配列に新しい関数をスタックすることができ、この関数は検証チェーンで呼び出されます.
各$parserが返す値は、次の$parserに入力されます.データモデルの更新が望ましくない場合はundefinedを返します.

angular.module('myApp')
.directive('oneToTen', function() {
return {
require: '?ngModel',
link: function(scope, ele, attrs, ngModel) {
if (!ngModel) return;
ngModel.$parsers.unshift(function(viewValue) {
var i = parseInt(viewValue);
if (i >= 0 && i < 10) {
ngModel.$setValidity('oneToTen', true);
return viewValue;
} else {
ngModel.$setValidity('oneToTen', false);
return undefined;
}
});
}
};
});

$formatters
バインドされたngModel値が変化し、$parsers配列の解析器によって処理されると、この値は$formatters流水線に渡される.$parsers配列がフォームの正当性状態を変更できるのと同様に、$formattersの関数もこれらの値を変更してフォーマットすることができる.
これらの関数は、単純な検証目的よりも、ビュー内の視覚的な変化を処理するためによく使用されます.たとえば、値をフォーマットするとします.この値には、$formatters配列でフィルタを実行できます.

angular.module('myApp')
.directive('oneToTen', ['$filter', function($filter) {
return {
require: '?ngModel',
link: function(scope, ele, attrs, ngModel) {
if (!ngModel) return;
ngModel.$formatters.unshift(function(v) {
return $filter('number')(v);
});
}
};
}]);

カスタムformコントロール('ngModel'を使用)
カスタムコントロールを「ngModel」と正常に動作させ、双方向バインドの効果を達成するには、次の必要があります.

は、方法$renderにデータが伝達された後にデータをレンダリングすることを担当するNgModelController#$formatters方法を実装する.

は、$setViewValueメソッドを呼び出し、任意のユーザがコントロールと対話した後、モデルが更新される必要がある場合に呼び出す.これは通常、DOMイベントリスナーで完了します.

ngModel.$setViewValue(value)関数は、コントローラ上のローカルの$viewValueを更新し、各$parser関数(ベリファイアを含む)に値を渡します.
値が解析され、$parser流線のすべての関数が呼び出されると、値は$modelValue属性に割り当てられ、命令のng-model属性が提供する式に渡される.
最後に、すべてのステップが完了すると、$viewChangeListenersのすべてのリスナーが呼び出されます.
なお、$setViewValue()を単独で呼び出すと、新しいdigestループは呼び出されないため、命令を更新するには、$viewValueを設定した後にdigestを手動でトリガーする必要がある.$setViewValue()メソッドは、コールバック関数を持つjQueryプラグインを使用するなど、カスタムコマンドでカスタムイベントをリスニングするのに適しています.コールバック時に$viewValueを設定し、digestループを実行します.

angular.module('form-example2', []).directive('contenteditable', function() {
return {
require: 'ngModel',
link: function(scope, elm, attrs, ctrl) {
//    ->   
elm.on('blur', function() {
scope.$apply(function() {
ctrl.$setViewValue(elm.html());
});
});

//    ->   
ctrl.$render = function() {
elm.html(ctrl.$viewValue);
};

//  DOM      
ctrl.$setViewValue(elm.html());
}
};
});

この命令は、役割ドメインを分離していないことに注意してください.このコマンドに独立した役割ドメインを設定すると、内部ngModelは外部ngModelの対応する値を更新できません.AngularJSはローカル役割ドメイン以外で値をクエリーします.
ngMessages
フォームを検証してデータを記入する場合、データが間違っているか無効である場合にヒント情報が表示され、angularでフォームを書く場合、ヒント情報はng-showでトリガ状況で表示することができ、重複タグを減らすためにngMessages命令を利用することができる.
angular-messagesはangularのモジュールであり、アプリケーション依存モジュールとして導入することができます.

angular.module("MyApp",["ngMessages"])；

<form name="signup_form" novalidate ng-submit="signupForm()" ng-controller="signupController">
<label>Your namelabel>
<input type="text"
placeholder="Name"
name="name"
ng-model="signup.name"
ng-minlength=3
ng-maxlength=20 required/>
<div class="error" ng-messages="signup_form.name.$error">
<div ng-message="required">Make sure you enter your namediv>
<div ng-message="minlength">Your name must be least 3 charactersdiv>
<div ng-message="maxlength">Your name cannot be longer than 20 charactersdiv>
div>
<button type="submit">Submitbutton>
form>

これにより、フォームデータの入力に誤りがあると、メッセージが1回に1つしか表示されず、コード内の順序が表示され、すべてのエラーを同時に表示する必要がある場合は、ng-messages命令の横にng-messages-mutipleを付ける必要があります.
あるいは、ビュー内の複数の場所で同じプロンプトメッセージを呼び出す必要がある場合が多い場合、次のようにメッセージをテンプレートに保存できます.
方法1

<！--In template/error.html-->
<div ng-message="required">This field is requireddiv>
<div ng-message="minlength">The field must be at least 3 charactersdiv>
<div ng-message="maxlength">The field cannot be longer than 20 charactersdiv>

方法2

<script type="text/ng-template" id="my-custom-messages">
"required">This field is required</div>
This field is too shortdiv>
script> 
  
        ng-messages-include        id：
 
  
<div class="error" ng-messages="signup_form.name.$error" ng-messages-include="template/error.html">

div>
<div class="error" ng-messages="signup_form.name.$error" ng-messages-include="my-custom-messages">

div>