Spisie treści
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:
