AngularJS
Walidacja formularza

Podstawowa walidacja formularza

Jedną z mocnych stron Angulara jest walidacja formularza po stronie klienta.

Radzenie sobie z tradycyjnymi danymi wejściowymi formularzy i koniecznością korzystania z zapytania w stylu jQuery może być czasochłonne i wymagające. Angular pozwala stosunkowo łatwo tworzyć profesjonalne interaktywne formularze.

Dyrektywa ng-model zapewnia dwukierunkowe wiązanie z polami wejściowymi, a zwykle atrybut novalidate jest również umieszczany w elemencie formularza, aby uniemożliwić przeglądarce natywną weryfikację.

Tak więc prosta forma wyglądałaby następująco:

<form name="form" novalidate>
  <label name="email"> Your email </label>
  <input type="email" name="email" ng-model="email" />
</form>

Aby sprawdzać poprawność danych wejściowych w Angular, użyj dokładnie tej samej składni, co zwykły element wejściowy , z wyjątkiem dodania atrybutu ng-model w celu określenia, z którą zmienną należy się wiązać w zakresie. Adres e-mail jest pokazany w poprzednim przykładzie. Aby sprawdzić poprawność liczby, składnia powinna wyglądać następująco:

<input type="number" name="postalcode" ng-model="zipcode" />

Ostatnie kroki do sprawdzania poprawności formularza podstawowego łączą się z funkcją przesyłania formularza na kontrolerze za pomocą ng-upload , zamiast pozwalać na przesłanie domyślnego formularza. Nie jest to obowiązkowe, ale zwykle jest używane, ponieważ zmienne wejściowe są już dostępne w zakresie, a więc dostępne dla funkcji przesyłania. Zazwyczaj dobrą praktyką jest nadawanie formie nazwy. Zmiany te spowodowałyby następującą składnię:

<form name="signup_form" ng-submit="submitFunc()" novalidate>
  <label name="email"> Your email </label>
  <input type="email" name="email" ng-model="email" />
  <button type="submit">Signup</button>
</form>

Powyższy kod jest funkcjonalny, ale jest jeszcze inna funkcjonalność, którą zapewnia Angular.

Następnym krokiem jest zrozumienie, że Angular dołącza atrybuty klas do przetwarzania formularzy za pomocą ng-pristine , ng-dirty , ng-valid i ng-invalid . Używanie tych klas w twoim css pozwoli ci stylizować poprawne / nieprawidłowe i nieskazitelne / brudne pola wprowadzania, a tym samym zmieniać prezentację, gdy użytkownik wprowadza dane do formularza.

Stany formularza i wejściowe

Formy kątowe i dane wejściowe mają różne stany, które są przydatne podczas sprawdzania poprawności treści

Stany wejściowe

Wszystkie powyższe stany są właściwościami logicznymi i mogą być prawdziwe lub fałszywe.

Dzięki nim wyświetlanie wiadomości do użytkownika jest bardzo łatwe.

<form name="myForm" novalidate>
    <input name="myName" ng-model="myName" required>
    <span ng-show="myForm.myName.$touched && myForm.myName.$invalid">This name is invalid</span>
</form>

W tym przypadku używamy dyrektywy ng-show do wyświetlania wiadomości użytkownikowi, jeśli zmodyfikował formularz, ale jest on nieprawidłowy.

Klasy CSS

Angular zapewnia również niektóre klasy CSS dla formularzy i danych wejściowych w zależności od ich stanu

Możesz użyć tych klas, aby dodać style do formularzy

input.ng-invalid {
  background-color: crimson;
}
input.ng-valid {
  background-color: green;
}

ngMessages

ngMessages służy do ulepszenia stylu wyświetlania komunikatów sprawdzania poprawności w widoku.

Tradycyjne podejście

Przed ngMessages zwykle wyświetlamy komunikaty sprawdzania poprawności za pomocą wstępnie zdefiniowanych instrukcji Angular ng-class . Podejście to było śmieciem i repetitive zadaniem.

Teraz, korzystając z ngMessages , możemy tworzyć własne niestandardowe wiadomości.

Przykład

HTML:

<form name="ngMessagesDemo">
  <input name="firstname" type="text" ng-model="firstname" required>
  <div ng-messages="ngMessagesDemo.firstname.$error">
    <div ng-message="required">Firstname is required.</div>
  </div>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.16/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.16/angular-messages.min.js"></script>

JS:

var app = angular.module('app', ['ngMessages']);

app.controller('mainCtrl', function ($scope) { 
    $scope.firstname = "Rohit";
});

Weryfikacja formularza niestandardowego

W niektórych przypadkach podstawowa walidacja nie wystarczy. Obsługa kątowego niestandardowego sprawdzania poprawności, dodając funkcje sprawdzania poprawności do obiektu $validators na ngModelController :

angular.module('app', [])
  .directive('myValidator', function() {
    return {
      // element must have ng-model attribute
      // or $validators does not work
      require: 'ngModel',
      link: function(scope, elm, attrs, ctrl) {
        ctrl.$validators.myValidator = function(modelValue, viewValue) {
            // validate viewValue with your custom logic
            var valid = (viewValue && viewValue.length > 0) || false;
            return valid; 
        };
      } 
    };

Walidator jest zdefiniowany jako dyrektywa wymagająca ngModel , więc aby zastosować walidator, po prostu dodaj niestandardową dyrektywę do kontrolki formularza wejściowego.

<form name="form">
  <input type="text" 
         ng-model="model" 
         name="model" 
         my-validator>
  <pre ng-bind="'my-validator returned: ' + form.model.$valid"></pre>
</form> 

A my-validator nie musi być stosowany do natywnej kontroli formularza. Mogą to być dowolne elementy, o ile mają w swoich atrybutach ng-model . Jest to przydatne, gdy masz niestandardowy komponent interfejsu użytkownika.

Zagnieżdżone formularze

Czasami pożądane jest zagnieżdżanie formularzy w celu logicznego grupowania kontrolek i danych wejściowych na stronie. Jednak formularze HTML5 nie powinny być zagnieżdżane. Zamiast tego dostarczana jest ng-form kątowa.

<form name="myForm" noValidate>
  <!-- nested form can be referenced via 'myForm.myNestedForm' -->
  <ng-form name="myNestedForm" noValidate>
    <input name="myInput1" ng-minlength="1" ng-model="input1" required />
    <input name="myInput2" ng-minlength="1" ng-model="input2" required />
  </ng-form>

  <!-- show errors for the nested subform here -->
  <div ng-messages="myForm.myNestedForm.$error">
    <!-- note that this will show if either input does not meet the minimum -->
    <div ng-message="minlength">Length is not at least 1</div>
  </div>
</form>

<!-- status of the form -->
<p>Has any field on my form been edited? {{myForm.$dirty}}</p>
<p>Is my nested form valid? {{myForm.myNestedForm.$valid}}</p>
<p>Is myInput1 valid? {{myForm.myNestedForm.myInput1.$valid}}</p>

Każda część formularza ma wpływ na ogólny stan formularza. Dlatego jeśli jedno z danych wejściowych myInput1 zostało edytowane i jest $dirty , jego forma zawierająca będzie również $dirty . Spowoduje to kaskadowanie do każdej zawierającej formy, więc zarówno myNestedForm jak i myForm będą $dirty .

Walidatory asynchroniczne

Asynchroniczne sprawdzania poprawności umożliwia sprawdzanie poprawności informacji o formularzu w oparciu o backend (za pomocą $ http).

Tego rodzaju walidatory są potrzebne, gdy chcesz uzyskać dostęp do informacji przechowywanych na serwerze, których nie możesz mieć na kliencie z różnych powodów, takich jak tabela użytkowników i inne informacje z bazy danych.

Aby użyć walidatorów asynchronicznych, uzyskujesz dostęp do ng-model swojego input i definiujesz funkcje zwrotne dla właściwości $asyncValidators .

Przykład:

Poniższy przykład sprawdza, czy podana nazwa już istnieje, backend zwróci status, który odrzuci obietnicę, jeśli nazwa już istnieje lub jeśli nie została podana. Jeśli nazwa nie istnieje, zwróci rozwiązaną obietnicę.

ngModel.$asyncValidators.usernameValidate = function (name) {               
     if (name) {
          return AuthenticationService.checkIfNameExists(name); // returns a promise
     } else {
          return $q.reject("This username is already taken!"); // rejected promise
     }
};

Teraz za każdym razem, gdy zmieniany jest ng-model wejścia, ta funkcja będzie działać i zwróci obietnicę z wynikiem.