Sprawdź poprawność wprowadzania danych za pomocą AngularJS

Kiedy pracujemy nad budowaniem aplikacji jednostronicowych, jednym z punktów, które możemy wyróżnić, jest wprowadzanie danych, tego typu funkcjonalność jest zwykle realizowana za pomocą FormularzOczywiście, jeśli zamierzamy zażądać danych od użytkownika, musimy sprawdzić, czy nie zawiera on błędów.
na szczęście AngularJS Posiada wewnętrzne mechanizmy, które pozwalają w prosty sposób dokonywać walidacji, dzięki czemu formularz może zostać przesłany tylko wtedy, gdy spełnione są warunki formatu danych.
Pierwszą rzeczą, której będziemy potrzebować, jest Formularz, umieścimy niektóre pola, na przykład imię, nazwisko i pole e-mail, generalnie są to najczęściej używane typy pól, które dadzą nam możliwość wygenerowania walidacji. Zobaczmy początkowy kod, który mamy:

Nazwa:Nazwisko:E-mail:Wiek:Wysłać

Jeśli spojrzymy, wykorzystaliśmy cechy HTML do walidacji pól, na przykład poprzez umieszczenie właściwości wymagany w przypadku wymaganych pól pomyślą, że to zadziała tylko w nowszych lub kompatybilnych przeglądarkach HTML5 tylko, ale kiedy używamy AngularJS, spowoduje to wypełnienie alternatywnych walidacji, jeśli otworzymy aplikację w przeglądarce, która nie jest zgodna z HTML5.
Widzimy, że pole wiek ma oprócz walidacji typu dwie właściwości AngularJS które dotyczą długości pola, oznacza to, że w sumie możemy umieszczać tylko liczby od 1 do 3 cyfr.
Jak na razie idzie nam dobrze z naszym ćwiczeniem, jednak nadal musimy zwalidować, że aby przesłać dane wszystko musi być zwalidowane, do tego musimy wygenerować kontrolera, który nam to umożliwi, do tego wskażemy formularzowi, który kontroler będzie używał, aby zmienić linię:

W następujący sposób:

Wewnątrz kontrolera mamy dostęp do właściwości o nazwie $ ważne, czyli ten, który wskaże, czy nasz formularz jest prawidłowy, aby móc wysłać dane, w tym celu musimy zmodyfikować wiersz przycisku wysyłania danych w następujący sposób:

Wysłać

Dokonanie modyfikacji powinno przebiegać w następujący sposób:

Wysłać

Wreszcie możemy stworzyć nasz kontroler w AngularJS, za pomocą którego będziemy przetwarzać nasze dane:

 function AddControllerUser ($zakres) {$zakres.wiadomość = ''; $ scope.addUser = function () {$ scope.message = 'Dzięki,' + $ scope.user.name + ', został dodany!'; }; } 

Powinno to dać nam wynik podobny do następującego w naszej przeglądarce:

Widzimy, że ponieważ nie ma danych, przycisk wysyłania jest wyłączony, zmieni się to, gdy wypełnimy odpowiednie dane, jak widać na poniższym obrazku:

Gdybyśmy umieścili e-mail w niewłaściwym formacie, przycisk nie zostałby aktywowany, to widzimy jak AngularJS Ułatwiło nam to tworzenie czegoś tak prostego jak formularz i na tym zakończyliśmy ten samouczek, byliśmy w stanie sprawdzić poprawność formularza w kompletny sposób, tylko przy użyciu właściwości HTML5 I małe AngularJS.Podobał Ci się i pomógł ten samouczek?Możesz nagrodzić autora, naciskając ten przycisk, aby dać mu pozytywny punkt