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

Ответ 1

Каждая входная информация проверки name отображается как свойство в form name в 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

Ответ 2

Для проверки недопустимого поля формы

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

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

Ответ 3

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

$('.ng-invalid');

Он перечислит все элементы DOM, которые по какой-либо причине не прошли проверку.

Ответ 4

Вы можете выполнить цикл form.$error.pattern.

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

Ответ 5

Если какое-либо поле недействительно, если вы попытаетесь получить его значение, оно будет undefined.

Допустим, у вас есть текстовый ввод, прикрепленный к $scope.mynum, который действителен только при вводе чисел, и вы набрали ABC на нем.

Если вы попытаетесь получить значение $scope.mynum, это будет undefined; он не вернет ABC.

(Возможно, вы все это знаете, но в любом случае)

Итак, я бы использовал массив, который имеет все элементы, которые нуждаются в проверке, которые я добавил в область действия, и использую фильтр (например, с помощью underscore.js), чтобы проверить, какие из них возвращаются как typeof undefined.

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

Ответ 6

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

Примечание. Не забудьте добавить свойство имени в поля в форме

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

Ответ 7

Для моего приложения я отображаю ошибку следующим образом:

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

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

Ответ 8

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