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>

якщо ви хочете побачити все, просто користувач '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-недійсний, ви можете перевірити, чи не надається поле будь-якому значенню, поки воно потрібне, або інші правила, які воно може порушувати (недійсний формат електронної пошти, визначення поза діапазоном / максимум / хв тощо) . Це найпростіший спосіб.