AngularJS - разница между нетронутым / грязным и нетронутым / нетронутым

158

AngularJS Developer Guide - Формы сообщают, что существует множество стилей и директив, касающихся форм и полей. Для каждого класса CSS:

ng-valid
ng-invalid
ng-pristine
ng-dirty
ng-touched
ng-untouched

В чем разница pristine/dirty, а touched/untouched?

angularjs

— Луис Масуэлли
источник

3

Теперь это в документации, на которую вы ссылаетесь, под заголовком «Использование CSS-классов».

— Бернхард Хофманн

1

Вы правы :) Althought кажется немного новым (наряду с новыми классами, которые он определяет)

— Luis Masuelli

220

AngularJS Developer Guide - CSS классы, используемые AngularJS

@property {boolean} $ нетронутый Истина, если элемент управления еще не потерял фокус.

@property {boolean} $ коснулся True, если элемент управления потерял фокус.

@property {boolean} $ pristine Истинно, если пользователь еще не взаимодействовал с элементом управления.

@property {boolean} $ dirty Истинно, если пользователь уже взаимодействовал с элементом управления.

— Юрий Рожовецкий
источник

89

$pristine/ $dirtyсообщает вам, действительно ли пользователь что-то изменил , в то время как $touched/ $untouchedсообщает вам, был ли пользователь там просто / посещен .

Это действительно полезно для проверки. Причина $dirtyвсегда заключалась в том, чтобы не показывать ответы проверки, пока пользователь фактически не посетил определенный элемент управления. Но, используя только $dirtyсвойство, пользователь не получит обратную связь проверки, если он фактически не изменил значение. Таким образом, $invalidполе все равно не будет показывать пользователю приглашение, если пользователь не изменил / не взаимодействовал со значением. Если пользователь полностью игнорировал обязательное поле, все выглядело нормально.

С Angular 1.3 и ng-touchedтеперь вы можете установить определенный стиль для элемента управления, как только пользователь размыл изображение, независимо от того, отредактировали ли они значение или нет.

Вот CodePen, который показывает разницу в поведении.

— XML
источник

Я ищу способ устранения ошибок проверки формы. form. $ setPristine не делает этого. Я видел другую форму подсказки. $ SetUntouched, но похоже, что она недоступна в угловой версии 1.3 19 beta, которую я использую. Однако я могу вызвать form.field_name. $ SetUntouched, но делать это для всех полей обременительно, есть ли лучший способ?

— Т. Рекс

$setPristineпросто делает форму un- $dirty. Я думаю, что вы можете хотеть form.setValidity(). Смотрите несколько полезных ответов на этот пост .

— XML

14

В Pro Angular-6 книга подробно описана ниже;

valid : это свойство возвращает true, если содержимое элемента допустимо, и false в противном случае.
invalid : это свойство возвращает true, если содержимое элемента недопустимо, и false в противном случае.
pristine : это свойство возвращает true, если содержимое элемента не было изменено.
dirty : Это свойство возвращает true, если содержимое элемента было изменено .
нетронутый : это свойство возвращает true, если пользователь не посетил элемент.
touch : это свойство возвращает true, если пользователь посетил элемент.

— fgul
источник

6

Стоит отметить, что свойства проверки различны для форм и элементов формы (обратите внимание, что касание и неприкосновение только для полей):

Input fields have the following states:

$untouched The field has not been touched yet
$touched The field has been touched
$pristine The field has not been modified yet
$dirty The field has been modified
$invalid The field content is not valid
$valid The field content is valid

They are all properties of the input field, and are either true or false.

Forms have the following states:

$pristine No fields have been modified yet
$dirty One or more have been modified
$invalid The form content is not valid
$valid The form content is valid
$submitted The form is submitted

They are all properties of the form, and are either true or false.

— Ивонн Абурроу
источник