Walidacja formularzy w AngularJS jest moim zdaniem jednym z największych minusów tego frameworka. Ja jako programista z doświadczeniem w C# i ASP.NET MVC byłem przyzwyczajony do czegoś zupełnie innego… Tam wystarczy właściwości modelu oznaczyć odpowiednimi atrybutami i użyć odpowiedniego “helpera” na widoku, a mechanizm “jQuery unobtrusive validation” robi resztę za mnie - oczywiście przy bardziej niestandardowych walidacjach trzeba trochę więcej pracy ale i tak w porównaniu z tym co standardowo proponuje AngularJS jest to niebo a ziemia.

Dlatego też nie ma się co dziwić, że podobni do mnie szukają dla Angulara czegoś, co choć trochę usprawni proces walidacji. I oto znaleźliśmy (konkretnie kolega Jacek z mojego projektu - pozdrawiam!) - a mowa o tytułowym module Angular Auto Validate!

Walidacja formularzy za pomocą Angular Auto Validate

Jak już wspominałem, wszystko jest tutaj dziecinnie proste - aby zacząć pracę wystarczy pobrać plik z modułem i umieścić go na stronie:

<script src="files/jcs-auto-validate.min.js"></script>

Oczywiście oprócz tego pliku, musimy mieć również załączonego Angulara… Dalej już z górki - do naszego moduły musimy dodać zależność do Angular Auto Validate:

angular.module('exampleApp', ['jcs-autoValidate']);

I to wszystko - od tego momentu możemy wykonywać walidację formularzy za pomocą opisywanego modułu! Na dzień dobry mamy skonfigurowany podstawowy zestaw walidatorów wraz z komunikatami, które oczywiście możemy dowolnie zmieniać. Podobnie ma się sprawa z własnymi, niestandardowymi walidatorami. Opisywany moduł obsługuje również lokalizację komunikatów walidacji za pomocą formatu i18n. Myślę, że te wszystkie “ficzery” dobrze są przedstawione w dokumentacji tego narzędzia - jeśli zainteresował Cię ten moduł, to warto tam zajrzeć by zobaczyć pełnię jego możliwości.

Jeśli używacie Bootstrapa, a zapewne duża część z Was to robi, uzyskujecie od razu dodatkowy benefit - Angular Auto Validate wykorzystuje bowiem domyślne klasy CSS tego frameworka do wyświetlania powiadomień o błędach itp. Dodatkowo możecie sobie włączyć ikonki walidacji, w ten sposób:

angular.module('exampleApp')
  .run([
    'bootstrap3ElementModifier',
    function (bootstrap3ElementModifier) {
        bootstrap3ElementModifier.enableValidationStateIcons(true);
    }
  ]);

Pełny, działający przykład przygotowałem dla Was w poniższym codepenie:

See the Pen EaopXv by burczu (@burczu) on CodePen.

Jak pewnie zauważyliście, pola formularza zawierają kilka standardowych walidatorów: required, min-length, max-length. Wszystkie one są standardowo obsługiwane przez Angular Auto Validate - jeśli spojrzeć w kod kontrolera to nie ma tam ani linijki walidacji. Nie trzeba nawet robić “ifologii” sprawdzającej czy model jest prawidłowy - jeśli formularz nie waliduje się, do metody submit nawet nie wejdziemy. Podobnie w kodzie HTML brak jakichkolwiek elementów związanych z walidacją - wszystko dzieje się automatycznie! Awesome! ;)

Podsumowanie

Osobiście jestem pod wrażeniem tego modułu! Kiedy zaczynaliśmy u nas w projekcie przygodę z AngularJS to właśnie automatyzacja walidacji wydawała się nam największym problemem - Angular Auto Validate w pełni zaspokaja wszelkie nasze potrzeby z tym związane. Być może rozwiąże też Wasze? ;)