Jak sprawdzić poprawność formularza za pomocą angularjs?

Jestem bardzo nowy w angularjs. Powiedz, że moja aplikacja ma formularz. Korzystając z inspektora, zauważyłem, że jeśli angularjs uważa, że ​​formularz jest nieprawidłowy, dodaje do formularza klasę ng-invalid. Śliczny.

Wygląda więc na to, że aby sprawdzić poprawność formularza muszę zaśmiecać swój kod selektorem Jquery ?! W jaki sposób angularjs wskazuje poprawność formularza bez użycia kontrolera formularza?

Kiedy umieścisz <form>tag w swoim ngApp, AngularJS automatycznie doda kontroler formularza (w rzeczywistości istnieje dyrektywa, zwana działaniem formdodającym niezbędne zachowanie). Wartość atrybutu name zostanie powiązana w twoim zakresie; więc coś takiego <form name="yourformname">...</form>zadowoli:

Formularz jest instancją FormController. Wystąpienie formularza można opcjonalnie opublikować w zakresie przy użyciu atrybutu name.

Aby sprawdzić poprawność formularza, możesz sprawdzić wartość $scope.yourformname.$valid właściwości zakresu.

Więcej informacji na temat formularzy można znaleźć w Podręczniku programisty .

Przykład

<div ng-controller="ExampleController">
  <form name="myform">
   Name: <input type="text" ng-model="user.name" /><br>
   Email: <input type="email" ng-model="user.email" /><br>
  </form>
</div>

<script>
  angular.module('formExample', [])
    .controller('ExampleController', ['$scope', function($scope) {

     //if form is not valid then return the form.
     if(!$scope.myform.$valid) {
       return;
     }
  }]);
</script>

Możesz także użyć myform.$invalid

Na przykład

if($scope.myform.$invalid){return;}

Formularz

• dyrektywy w module ng Dyrektywa, która tworzy instancję FormController.

Jeśli atrybut nazwy jest określony, kontroler formularza jest publikowany w bieżącym zakresie pod tą nazwą.

Alias: ngForm

W Angular formularze mogą być zagnieżdżane. Oznacza to, że formularz zewnętrzny jest ważny, gdy wszystkie formularze podrzędne są również ważne. Jednak przeglądarki nie pozwalają na zagnieżdżanie elementów, więc Angular udostępnia dyrektywę ngForm, która zachowuje się identycznie, ale może być zagnieżdżana. Dzięki temu możesz mieć zagnieżdżone formularze, co jest bardzo przydatne w przypadku używania dyrektyw walidacji Angular w formularzach, które są generowane dynamicznie za pomocą dyrektywy ngRepeat. Ponieważ nie można dynamicznie generować atrybutu name elementów wejściowych za pomocą interpolacji, każdy zestaw powtarzanych danych wejściowych należy opakować w dyrektywę ngForm i zagnieździć je w zewnętrznym elemencie formularza.

Klasy CSS

ng-valid jest ustawiane, jeśli formularz jest ważny.

ng-invalid jest ustawiane, jeśli formularz jest nieprawidłowy.

ng-pristine jest ustawione, jeśli forma jest nieskazitelna.

brudny jest ustawiane, jeśli formularz jest brudny.

ng-submitted jest ustawione, jeśli formularz został przesłany.

Należy pamiętać, że ngAnimate może wykryć każdą z tych klas po dodaniu i usunięciu.

Przesyłanie formularza i zapobieganie domyślnej akcji

Ponieważ rola formularzy w aplikacjach kątowych po stronie klienta jest inna niż w klasycznych aplikacjach przesyłania w obie strony, pożądane jest, aby przeglądarka nie tłumaczyła przesłania formularza na pełne przeładowanie strony, które wysyła dane na serwer. Zamiast tego należy uruchomić logikę javascript, aby obsłużyć przesyłanie formularza w sposób specyficzny dla aplikacji.

Z tego powodu Angular zapobiega domyślnej akcji (przesłaniu formularza na serwer), chyba że element ma określony atrybut akcji.

Możesz użyć jednego z dwóch poniższych sposobów, aby określić, jaka metoda javascript ma zostać wywołana po przesłaniu formularza:

ngSubmit w elemencie formularza

Dyrektywa ngClick na pierwszym przycisku lub polu wejściowym typu Submit (input [type = submit])

Aby zapobiec podwójnemu wykonaniu procedury obsługi, użyj tylko jednej z dyrektyw ngSubmit lub ngClick.

Wynika to z następujących zasad przesyłania formularzy w specyfikacji HTML:

Jeśli formularz ma tylko jedno pole wejściowe, naciśnięcie klawisza Enter w tym polu powoduje przesłanie formularza (ngSubmit), jeśli formularz ma 2+ pól wejściowych i nie ma przycisków, lub input[type=submit]naciśnięcie klawisza Enter nie powoduje przesłania, jeśli formularz ma jedno lub więcej pól wejściowych i jeden lub więcej przycisków lub input[type=submit]naciśnięcie klawisza Enter w którymkolwiek z pól wejściowych spowoduje uruchomienie modułu obsługi kliknięcia na pierwszym przycisku lubinput[type=submit] (ngClick) oraz funkcję obsługi przesyłania w formularzu (ngSubmit).

Wszelkie oczekujące zmiany ngModelOptions zostaną wprowadzone natychmiast po przesłaniu załączającego formularza. Należy pamiętać, że zdarzenia ngClick wystąpią przed aktualizacją modelu.

Użyj ngSubmit, aby uzyskać dostęp do zaktualizowanego modelu.

app.js :

angular.module('formExample', [])
  .controller('FormController', ['$scope', function($scope) {
    $scope.userType = 'guest';
  }]);

Formularz :

<form name="myForm" ng-controller="FormController" class="my-form">
  userType: <input name="input" ng-model="userType" required>
  <span class="error" ng-show="myForm.input.$error.required">Required!</span>
  userType = {{userType}}
  myForm.input.$valid = {{myForm.input.$valid}}
  myForm.input.$error = {{myForm.input.$error}}
  myForm.$valid = {{myForm.$valid}}
  myForm.$error.required = {{!!myForm.$error.required}}
 </form>

Źródło: AngularJS: API: formularz