formDyrektywa AngularJS
Przykład
„Właściwy stan” tego formularza nie zostanie uznany za „prawdziwy”, o ile wymagane pole wejściowe będzie puste:
<form name="myForm">
<input name="myInput" ng-model="myInput" required>
</form>
<p>The forms's valid state is:</p>
<h1>{{myForm.$valid}}</h1>
Definicja i użycie
AngularJS modyfikuje domyślne zachowanie <form>elementu.
Formularze wewnątrz aplikacji AngularJS mają określone właściwości. Te właściwości opisują bieżący stan formularza.
Formularze mają następujące stany:
$pristineŻadne pola nie zostały jeszcze zmodyfikowane$dirtyCo najmniej jeden został zmodyfikowany$invalidTreść formularza jest nieprawidłowa$validTreść formularza jest prawidłowa$submittedFormularz został przesłany
Wartość każdego stanu reprezentuje wartość logiczną i jest albo true
lub false.
Formularze w AngularJS uniemożliwiają domyślną akcję, czyli przesłanie formularza na serwer, jeśli atrybut akcji nie jest określony.
Składnia
<form name="formname"></form>
Do formularzy odwołuje się wartość atrybutu name.
Klasy CSS
Formularze wewnątrz aplikacji AngularJS mają określone klasy . Te klasy mogą służyć do stylizowania formularzy zgodnie z ich stanem.
Dodaje się następujące klasy:
ng-pristineŻadne pola nie zostały jeszcze zmodyfikowaneng-dirtyZmodyfikowano jedno lub więcej pólng-validTreść formularza jest prawidłowang-invalidTreść formularza jest nieprawidłowang-valid-keyJeden klucz do każdej walidacji. Przykład:ng-valid-required, przydatne, gdy istnieje więcej niż jedna rzecz, która musi zostać zweryfikowanang-invalid-keyPrzykład:ng-invalid-required
Klasy są usuwane, jeśli reprezentowana przez nie wartość to false.
Przykład
Zastosuj style dla niezmodyfikowanych (pierwotnych) form oraz dla zmodyfikowanych form:
<style>
form.ng-pristine {
background-color: lightblue;
}
form.ng-dirty {
background-color: pink;
}
</style>