formДиректива AngularJS
Пример
«Действительное состояние» этой формы не будет считаться «истинным», пока обязательное поле ввода пусто:
<form name="myForm">
<input name="myInput" ng-model="myInput" required>
</form>
<p>The forms's valid state is:</p>
<h1>{{myForm.$valid}}</h1>
Определение и использование
AngularJS изменяет поведение <form>элемента по умолчанию.
Формы внутри приложения AngularJS имеют определенные свойства. Эти свойства описывают текущее состояние формы.
Формы имеют следующие состояния:
$pristineНи одно поле еще не изменено$dirtyОдин или несколько были изменены$invalidСодержимое формы недействительно$validСодержимое формы верно$submittedФорма отправлена
Значение каждого состояния представляет собой логическое значение и может быть либо , true
либо false.
Forms в AngularJS предотвращает действие по умолчанию, которое представляет собой отправку формы на сервер, если атрибут действия не указан.
Синтаксис
<form name="formname"></form>
На формы ссылаются, используя значение атрибута имени.
CSS-классы
Формам внутри приложения AngularJS присваиваются определенные классы . Эти классы можно использовать для стилизации форм в соответствии с их состоянием.
Добавлены следующие классы:
ng-pristineНи одно поле еще не было измененоng-dirtyОдно или несколько полей были измененыng-validСодержимое формы верноng-invalidСодержимое формы недействительноng-valid-keyОдин ключ для каждой проверки. Пример:ng-valid-required, полезно, когда нужно проверить более одной вещи .ng-invalid-keyПример:ng-invalid-required
Классы удаляются, если значение, которое они представляют, равно false.
Пример
Примените стили для неизмененных (первоначальных) форм и для измененных форм:
<style>
form.ng-pristine {
background-color: lightblue;
}
form.ng-dirty {
background-color: pink;
}
</style>