инструкции textarea AngularJS

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

AngularJS изменяет <textarea> по умолчанию поведение элемента, но при условии ng-model свойство существует.

Они предоставляют данные связи, что означает, что они являются частью модели AngularJS и могут бытьreferenced и обновлены в функциях AngularJS и DOM.

Они предоставляют валидацию. Пример: с required свойство <textarea> элемент, пока он не будет пустым, его $valid Состояние будет установлено false.

Они также предоставляют управление состоянием. AngularJS сохраняет текущее состояние всех элементов текстовой области.

Текстовая область поля имеет следующие состояния:

• $untouched Это поле еще не было коснуто
• $touched Это поле было коснуто
• $pristine Это поле еще не было изменено
• $dirty Это поле было изменено
• $invalid Содержимое поля недопустимо
• $valid Содержимое поля допустимо

Каждое значение состояния представляет собой булево значение, истинное или ложно.

Пример

Текстовая область с данными связями:

<textarea ng-model="myTextarea"></textarea>
<p>Значение поля текстовой области:</p>
<h1>{{myTextarea}}</h1>

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

Грамматика

<textarea ng-model="name"></textarea>

Используя ng-model значения свойств для ссылки на элементы текстовой области.

CSS классы

Внутри приложения 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Эти классы будут удалены.

Пример

Применение стилей CSS для элементов текстовых полей, которые являютсяvalid иinvalid:

<style>
textarea.ng-invalid {
    background-color: pink;
}
textarea.ng-valid {
    background-color: lightgreen;
}
</style>

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