AngularJS: Czy istnieje sposób na określenie, które pola powodują, że formularz jest nieważny?

Mam następujący kod w aplikacji AngularJS, wewnątrz kontrolera, który jest wywoływany z funkcji ng-submit, która należy do formularza o nazwie profileForm:

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

Czy w tej funkcji istnieje sposób, aby dowiedzieć się, które pola powodują, że cały formularz jest nazywany nieważnym?

nameInformacje walidacyjne każdego wejścia są ujawniane jako właściwość w formnazwie w 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 }

Odsłonięte właściwości są $pristine, $dirty, $valid, $invalid, $error.

Jeśli z jakiegoś powodu chcesz powtórzyć błędy:

$scope.someForm.$error
// > { required: [{$name: "username", $error: true /*...*/},
//                {$name: "password", /*..*/}] }

Każda błędna reguła zostanie ujawniona jako $ error.

Oto plunkr do gry z http://plnkr.co/edit/zCircDauLfeMcMUSnYaO?p=preview

Do sprawdzania, które pole formularza jest nieprawidłowe

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

Spowoduje to wyświetlenie tablicy nieprawidłowych pól formularza

Jeśli chcesz zobaczyć, które pola zakłócają Twoją walidację i masz jQuery do pomocy, po prostu wyszukaj klasę „ng-invalid” w konsoli javascript.

$('.ng-invalid');

Wyświetli listę wszystkich elementów DOM, które z jakiegokolwiek powodu nie przeszły weryfikacji.

Możesz zapętlić form.$error.pattern.

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

Jeśli którekolwiek pole jest nieprawidłowe, jeśli spróbujesz uzyskać jego wartość, będzie undefined.

Powiedzmy, że masz dołączone pole tekstowe, $scope.mynumktóre jest ważne tylko wtedy, gdy wpisujesz liczby i wpisałeś ABCje.

Jeśli spróbujesz uzyskać wartość $scope.mynum, byłoby undefined; nie zwróciABC .

(Prawdopodobnie wiesz to wszystko, ale i tak)

Tak więc użyłbym tablicy zawierającej wszystkie elementy wymagające walidacji, które dodałem do zakresu, i użyłbym filtru (na przykład z podkreśleniem underscore.js), aby sprawdzić, które z nich zwracają się jako typeof undefined .

A to byłyby pola powodujące nieprawidłowy stan.

Chciałem wyświetlić wszystkie błędy w wyłączonej podpowiedzi przycisku Zapisz, aby użytkownik wiedział, dlaczego jest wyłączony, zamiast przewijać w górę iw dół długiego formularza.

Uwaga: pamiętaj, aby dodać właściwość name do pól w formularzu

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

W przypadku mojej aplikacji wyświetlany jest następujący błąd:

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

jeśli chcesz zobaczyć wszystko, po prostu użytkownik 'err' wyświetli coś takiego:

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

Nie jest to dobrze sformatowane, ale zobaczysz tam te rzeczy ...

Jeśli chcesz znaleźć pola, które unieważniają formularz w interfejsie użytkownika bez programowo, po prostu kliknij prawym przyciskiem myszy inspekcję (otwórz narzędzia programistyczne w widoku elementów), a następnie wyszukaj ng-invalid za pomocą ctrl + f w tej zakładce. Następnie dla każdego pola, dla którego znajdziesz ng-invalid class, możesz sprawdzić, czy pole nie ma żadnej wartości, gdy jest wymagane, lub inne zasady, które może naruszać (nieprawidłowy format wiadomości e-mail, definicja poza zakresem / maks / min itp.) . To najłatwiejszy sposób.