Формы Angular играют решающую роль в веб-разработке, позволяя пользователям вводить и отправлять данные. При работе с формами Angular вы можете встретить такие термины, как «грязный», «нетронутый», «тронутый», «нетронутый», «действительный» и «недействительный». Понимание этих состояний необходимо для создания надежных и удобных для пользователя форм. В этой статье мы углубимся в каждое из этих состояний, дадим разговорные объяснения и предложим примеры кода, иллюстрирующие их использование.

Грязные и первозданные штаты:

В формах Angular грязное состояние означает, что пользователь взаимодействовал с элементом управления формы, изменяя его значение. С другой стороны, первоначальное состояние означает, что пользователь не трогал и не изменял элемент управления формы.

Давайте рассмотрим простую форму входа с полем ввода адреса электронной почты. Изначально поле ввода нетронуто, то есть пользователь с ним не взаимодействовал. Однако как только пользователь начинает вводить свой адрес электронной почты, поле ввода становится грязным. Вы можете определить грязное или чистое состояние, используя свойства dirtyи pristineэлемента управления формой.

Затронутые и нетронутые состояния:

Состояние касания в формах Angular указывает на то, что пользователь сосредоточился на элементе управления формы, а затем отошел от него. И наоборот, нетронутое состояние означает, что пользователь не трогал элемент управления формой и не фокусировался на нем.

Чтобы продемонстрировать это, представим себе форму регистрации с полем для ввода пароля. Когда пользователь нажимает на поле пароля, оно трогается. Если затем пользователь щелкнет другой элемент формы, не изменяя поле пароля, оно останется затронутым, но останется нетронутым. Вы можете определить состояние касания или неприкосновенности, используя свойства touchedи untouchedэлемента управления формой.

Действительные и недействительные состояния:

В формах Angular допустимое состояние означает, что вводимые пользователем данные соответствуют определенным критериям проверки. С другой стороны, недопустимое состояние указывает на то, что введенные пользователем данные не соответствуют правилам проверки.

Например, давайте рассмотрим контактную форму с полем для ввода номера телефона. Если пользователь вводит действительный номер телефона, поле становится действительным. Если пользователь вводит неверный номер телефона или оставляет поле пустым, оно становится недействительным. Вы можете проверить допустимое или недопустимое состояние, используя свойства validи invalidэлемента управления формой.

Дополнительные методы:

Помимо упомянутых состояний, формы Angular предоставляют несколько методов для работы с элементами управления формой. Вот несколько часто используемых методов:

1. markAsDirty(): программно помечает элемент управления формой как грязный.
2. markAsPristine(): возвращает элемент управления формы в исходное состояние.
3. markAsTouched(): помечает элемент управления формой как затронутый программно.
4. markAsUntouched(): возвращает элемент управления формы в нетронутое состояние.
5. setErrors(): ошибки проверки элемента управления формы устанавливаются вручную.

Понимание различных состояний форм Angular необходимо для создания интерактивных и проверенных форм. Состояния «грязный», «чистый», «тронутый», «нетронутый», «действительный» и «недействительный» позволяют предоставлять пользователям содержательную обратную связь и контролировать поведение ваших форм. Используя предоставленные примеры кода и эффективно применяя эти состояния, вы можете улучшить взаимодействие с пользователем и обеспечить целостность данных.