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