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.
Ивонн Абурроу
источник