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?
validation
angularjs
GSto
źródło
źródło
name
atrybut wejścia, aby zobaczyć je w $ name (oczywiście). Fakt, że AngularJS wiąże się z właściwością modelu bez potrzeby podawania nazwy, może utrudniać zdiagnozowanie, które dane wejściowe są nieprawidłowe.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
źródło
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.
źródło
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; .... } }); }
źródło
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.mynum
które jest ważne tylko wtedy, gdy wpisujesz liczby i wpisałeśABC
je.Jeśli spróbujesz uzyskać wartość
$scope.mynum
, byłobyundefined
; 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.
źródło
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(); }
źródło
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 ...
źródło
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.
źródło