97

name のフォームに属する ng-submit 関数から呼び出されるコントローラー内の AngularJS アプリケーションに次のコードがありますprofileForm。

$scope.updateProfile = function() {
  if($scope.profileForm.$invalid) { 
    //error handling..
  }
  //etc.
};

この関数内で、フォーム全体が無効と呼ばれる原因となっているフィールドを特定する方法はありますか?

4

8 に答える 8

95

各入力nameの検証情報は、formname in のプロパティとして公開されますscope。

HTML

<form name="someForm" action="/">
    <input name="username" required />
    <input name="password" type="password" required />
</form>

JS

$scope.someForm.username.$valid
// > false
$scope.someForm.password.$error
// > { required: true }

公開されているプロパティは、、、、、$pristineです。$dirty$valid$invalid$error

何らかの理由でエラーを繰り返し処理する場合:

$scope.someForm.$error
// > { required: [{$name: "username", $error: true /*...*/},
//                {$name: "password", /*..*/}] }

エラーのある各ルールは $error で公開されます。

http://plnkr.co/edit/zCircDauLfeMcMUSnYaO?p=previewで遊ぶ plunkr を次に示します。

于 2013-08-16T21:08:57.943 に答える
28

フォームのどのフィールドが無効かを確認するため

console.log($scope.FORM_NAME.$error.required);

これにより、フォームの無効なフィールドの配列が出力されます

于 2015-02-27T14:34:27.577 に答える
15

どのフィールドが検証を台無しにしているかを確認したい場合で、jQuery があれば、javascript コンソールで「ng-invalid」クラスを検索してください。

$('.ng-invalid');

何らかの理由で検証に失敗したすべての DOM 要素を一覧表示します。

于 2016-07-05T14:08:44.127 に答える
12

をループできますform.$error.pattern。

$scope.updateProfile = function() {
    var error = $scope.profileForm.$error;
    angular.forEach(error.pattern, function(field){
        if(field.$invalid){
            var fieldName = field.$name;
            ....
        }
    });
}
于 2013-08-16T20:53:33.760 に答える
2

いずれかのフィールドが無効な場合、その値を取得しようとすると、 になりますundefined。

$scope.mynum数字を入力したときにのみ有効なテキスト入力が添付されていてABC、それを入力したとしましょう。

の値を取得しようとすると、次の$scope.mynumようになりますundefined。を返しませんABC。

（おそらく、あなたはこれをすべて知っていますが、とにかく）

したがって、スコープに追加した検証が必要なすべての要素を含む配列を使用し、フィルター (たとえば underscore.js を使用) を使用して、どの要素が として返されるかを確認しますtypeof undefined。

そして、それらは無効な状態の原因となるフィールドになります。

于 2013-08-16T20:56:01.683 に答える