web-dev-qa-db-ja.com

AngularJS：どのフィールドがフォームを無効にしているのかを判断する方法はありますか？

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

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

この関数の中で、どのフィールドがフォーム全体を無効と呼んでいるのかを知る方法はありますか？

validationangularjs
93
GSto

各入力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 で遊ぶためのプランカーです

90
Umur Kontacı

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

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

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

26
Shivek Parmar

どのフィールドが検証を台無しにしているかを知りたい場合、jQueryが役立つ場合は、javascriptコンソールで"ng-invalid"クラスを検索してください。

$('.ng-invalid');

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

14
Thassae Santos

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

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

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

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

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

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

そのため、スコープに追加した検証を必要とするすべての要素を含む配列を使用し、フィルターを使用して（たとえば、underscore.jsを使用して）typeofundefinedとして返される要素を確認します。

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

2
chris-l

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

注：フォームのフィールドに名前プロパティを追加することを忘れないでください

    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();
    }
2
Sebastian Castaldi

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

<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": {}

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

1
messed-up

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

1
ozanmut