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