inputДиректива AngularJS
Пример
Поле ввода с привязкой данных:
<input ng-model="myInput">
<p>The value of the input field is:</p>
<h1>{{myInput}}</h1>
Определение и использование
AngularJS изменяет поведение <input>элементов по умолчанию, но только при наличии ng-modelатрибута.
Они обеспечивают привязку данных, что означает, что они являются частью модели AngularJS, и на них можно ссылаться и обновлять как в функциях AngularJS, так и в DOM.
Они обеспечивают валидацию. Пример: <input>элемент с requiredатрибутом имеет $validсостояние, установленное до
falseтех пор, пока оно пусто.
Они также обеспечивают государственный контроль. AngularJS хранит текущее состояние всех элементов ввода.
Поля ввода имеют следующие состояния:
$untouchedПоле еще не тронуто$touchedПоле было затронуто$pristineПоле еще не изменено$dirtyПоле было изменено$invalidНедопустимое содержимое поля$validСодержимое поля допустимо
Значение каждого состояния представляет собой логическое значение и может быть либо , true
либо false.
Синтаксис
<input ng-model="name">
На входные элементы ссылаются, используя значение ng-modelатрибута.
CSS-классы
<input>элементам внутри приложения AngularJS присваиваются определенные классы . Эти классы можно использовать для стилизации элементов ввода в соответствии с их состоянием.
Добавлены следующие классы:
ng-untouchedПоле еще не тронутоng-touchedПоле было затронутоng-pristineПоле еще не измененоng-dirtyПоле было измененоng-validСодержимое поля допустимоng-invalidНедопустимое содержимое поляng-valid-keyОдин ключ для каждой проверки. Пример:ng-valid-required, полезно, когда нужно проверить более одной вещи .ng-invalid-keyПример:ng-invalid-required
Классы удаляются, если значение, которое они представляют, равно false.
Пример
Примените стили для действительных и недопустимых элементов ввода, используя стандартный CSS:
<style>
input.ng-invalid {
background-color: pink;
}
input.ng-valid {
background-color: lightgreen;
}
</style>