Какие классы состояния CSS предоставляет ngModel?

В Angular, директива ngModel предоставляет возможность двустороннего связывания данных. При использовании ngModel, в зависимости от состояния элемента формы, Angular автоматически добавляет несколько классов к элементу. Эти классы помогают разработчикам стилизовать элементы формы в зависимости от их состояния, таких как "валидный", "невалидный", "испытывает ли элемент ошибку" и т.д. Давайте рассмотрим основные классы состояния CSS, которые могут быть добавлены к элементам с ngModel.

Основные классы состояния

1. ng-untouched: Этот класс используется, когда элемент еще не был затронут пользователем.
2. ng-touched: Этот класс появляется, когда элемент был затронут хотя бы один раз.
3. ng-pristine: Класс указывает, что значение элемента не изменялось с момента его инициализации.
4. ng-dirty: Этот класс добавляется, когда пользователь изменяет значение элемента.
5. ng-valid: Класс говорит о том, что значение элемента валидно согласно установленным правилам валидации.
6. 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, позволяет разработчикам легко управлять стилями формы и улучшать пользовательский интерфейс и опыт. Эти классы дают возможность применять различные стили в зависимости от состояния элементов формы, что делает интерфейс более отзывчивым и информативным.