Инструкции по использованию формы AngularJS

Определение и использование

Изменение AngularJS <form> edefault behavior of the element.

Формы в приложениях AngularJS имеют некоторые атрибуты. Эти атрибуты описывают текущее состояние формы.

Форма имеет следующие состояния:

• $pristine Ни один из полей не был изменен
• $dirty Одна или несколько полей были изменены
• $invalid Содержимое формы не валидно
• $valid Содержимое формы валидно
• $subscribed Форма отправлена

Значение каждого состояния представляет собой булево значение, равное true или false.

Если не указан атрибут action, форма AngularJS будет блокировать стандартную операцию, то есть отправку формы на сервер.

Пример

Пример 1

Пока необходимые поля ввода пусты, "статус формы" не будет считаться "true":

<form name="myForm">
<input name="myInput" ng-model="myInput" required>
</form>
<p>Статус формы:</p>
<h1>{{myForm.$valid}}</h1>

Попробуйте сами

Пример 2

Применить стиль к не измененному (оригинальному) формуляру и измененному формуляру:

<style>
form.ng-pristine {
    background-color: lightblue;
}
form.ng-dirty {
    background-color: pink;
}
</style>

Попробуйте сами

Синтаксис

<form name="formname</form>

с использованием name значений свойств для ссылки на форму.

CSS классы

Формы в приложении AngularJSassigned certain classes. Эти классы можно использовать для настройки стиля формы в зависимости от ее состояния.

Добавлены следующие классы:

• ng-pristine Нет незаполненных полей
• ng-dirty Одна или несколько полей были изменены
• ng-valid Содержимое формы валидно
• ng-invalid Содержимое формы не валидно
• ng-valid-key Проверка каждого ключа. Например:ng-valid-requiredполезно, когда необходимо проверить более одного элемента
• ng-invalid-key Например:ng-invalid-required

Если значение класса代表 falseЕсли эти классы будут удалены.