AngularJS：フォームが無効になっているフィールドを特定する方法はありますか？

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

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

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

各入力nameの検証情報は、formの名前のプロパティとして公開されます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があります

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

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

これはフォームの無効なフィールドの配列を出力します

どのフィールドが検証に影響を及ぼしているかを確認したい場合で、jQueryが役立つ場合は、JavaScriptコンソールで「ng-invalid」クラスを検索してください。

$('.ng-invalid');

何らかの理由で検証に失敗したすべてのDOM要素がリストされます。

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

$scope.updateProfile = function() {
    var error = $scope.profileForm.$error;
    angular.forEach(error.pattern, function(field){
        if(field.$invalid){
            var fieldName = field.$name;
            ....
        }
    });
}

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

あなたが$scope.mynumそれに接続されたテキスト入力を持っていて、あなたがそれをタイプしたときだけ有効であるとしましょうABC。

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

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

したがって、スコープに追加した検証が必要なすべての要素を含む配列を使用し、フィルター（たとえば、underscore.js）を使用して、どの要素が typeof undefined。

そして、それらは無効な状態を引き起こすフィールドです。

無効になっている[保存]ボタンのツールチップにすべてのエラーを表示したかったので、ユーザーは長いフォームを上下にスクロールする代わりに無効になっている理由を知ることができます。

注：フォームのフィールドに名前プロパティを追加してください

    if (frm) {
        disable = frm.$invalid;
        if (frm.$invalid && frm.$error && frm.$error.required) {
            frm.$error.required.forEach(function (error) {
                disableArray.push(error.$name + ' is required'); 
            });
        }
    }
    if (disableArray.length > 0) {
        vm.disableMessage = disableArray.toString();
    }

私のアプリケーションでは、次のようなエラーが表示されます。

<ul ng-repeat="errs in myForm.$error">
<li ng-repeat="err in errs">{{err.$name}}</li></ul>

すべてを見たい場合は、次のように表示されるユーザー「err」だけです。

 "$validators": {},
"$asyncValidators": {},
"$parsers": [],
"$formatters": [],
"$viewChangeListeners": [],
"$untouched": true,
"$touched": false,
"$pristine": true,
"$dirty": false,
"$valid": false,
"$invalid": true,
"$error": { "required": true },
"$name": "errorfieldName",
"$options": {}

これはうまくフォーマットされていませんが、これらのものがそこに表示されます...

プログラムを使わずにUIでフォームを無効にするフィールドを見つけたい場合は、右クリックして（要素ビューで開発者ツールを開き）、このタブ内でctrl + fを使用してng-invalidを検索します。次に、ng-invalidクラスを見つけた各フィールドについて、必要なときにフィールドに値が与えられていないか、または違反する可能性のある他のルール（無効な電子メール形式、範囲外/最大/最小の定義など）を確認できます。 。これが最も簡単な方法です。