Какие классы состояния CSS предоставляет ngModel?
В Angular, директива ngModel предоставляет возможность двустороннего связывания данных. При использовании ngModel, в зависимости от состояния элемента формы, Angular автоматически добавляет несколько классов к элементу. Эти классы помогают разработчикам стилизовать элементы формы в зависимости от их состояния, таких как "валидный", "невалидный", "испытывает ли элемент ошибку" и т.д. Давайте рассмотрим основные классы состояния CSS, которые могут быть добавлены к элементам с ngModel.
Основные классы состояния
ng-untouched: Этот класс используется, когда элемент еще не был затронут пользователем.ng-touched: Этот класс появляется, когда элемент был затронут хотя бы один раз.ng-pristine: Класс указывает, что значение элемента не изменялось с момента его инициализации.ng-dirty: Этот класс добавляется, когда пользователь изменяет значение элемента.ng-valid: Класс говорит о том, что значение элемента валидно согласно установленным правилам валидации.ng-invalid: Класс, который показывает, что значение элемента не валидно.Пример использования
Рассмотрим пример, как это выглядит в коде.
<form #myForm="ngForm">
<input type="text"
name="username"
ngModel
required
#username="ngModel">
<div [ngClass]="{'has-error': username.invalid && username.touched}">
<input type="submit" value="Отправить" [disabled]="myForm.invalid">
</div>
<div>
<p>Состояние элемента:</p>
<p>ng-untouched: {{username.untouched}}</p>
<p>ng-touched: {{username.touched}}</p>
<p>ng-pristine: {{username.pristine}}</p>
<p>ng-dirty: {{username.dirty}}</p>
<p>ng-valid: {{username.valid}}</p>
<p>ng-invalid: {{username.invalid}}</p>
</div>
</form>
<style>
.has-error {
color: red;
}
</style>
Как это работает?
В данном примере мы создаем форму с одним текстовым полем для имени пользователя. Мы используем директиву ngModel, чтобы обеспечить двустороннее связывание. Также мы добавляем валидацию, используя атрибут required.
Классы состояния (ng-untouched, ng-touched, ng-pristine, ng-dirty, ng-valid, и ng-invalid) добавляются к элементу автоматически в зависимости от того, как взаимодействует пользователь с ним. Это позволяет нам динамически изменять стили нашего интерфейса. Например, мы используем класс has-error для отображения сообщения об ошибке, если поле не валидно и было затронуто пользователем.
Заключение
Использование классов состояния CSS, предоставляемых ngModel, позволяет разработчикам легко управлять стилями формы и улучшать пользовательский интерфейс и опыт. Эти классы дают возможность применять различные стили в зависимости от состояния элементов формы, что делает интерфейс более отзывчивым и информативным.