AngularJS: есть ли способ определить, какие поля делают форму недействительной?

У меня есть следующий код в приложении AngularJS внутри контроллера, который вызывается из функции ng-submit, которая принадлежит форме с именем 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.

Вот plunkr для игры с http://plnkr.co/edit/zCircDauLfeMcMUSnYaO?p=preview

Для проверки, какое поле формы недействительно

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

это выведет массив недопустимых полей формы

Если вы хотите увидеть, какие поля портят вашу проверку, и у вас есть jQuery, чтобы помочь вам, просто найдите класс «ng-invalid» в консоли javascript.

$('.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.

И это будут поля, вызывающие недопустимое состояние.

Я хотел отобразить все ошибки в подсказке отключенной кнопки «Сохранить», чтобы пользователь знал, почему она отключена, вместо того, чтобы прокручивать длинную форму вверх и вниз.

Примечание: не забудьте добавить свойство name в поля вашей формы

    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>

если вы хотите видеть все, просто введите user 'err', который отобразит что-то вроде этого:

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

Не так хорошо отформатирован, но вы увидите эти вещи там ...

Если вы хотите найти поля, которые аннулируют форму в пользовательском интерфейсе без программного обеспечения, просто щелкните правой кнопкой мыши и проверьте (откройте инструменты разработчика в представлении элементов), а затем найдите ng-invalid с помощью ctrl + f внутри этой вкладки. Затем для каждого поля, для которого вы найдете класс ng-invalid, вы можете проверить, не присвоено ли полю какое-либо значение, пока оно требуется, или другие правила, которые оно может нарушать (недопустимый формат электронной почты, определение вне диапазона / макс / мин и т. Д.) . Это самый простой способ.