AngularJS - diferença entre primitivo / sujo e tocado / intocado

158

Guia do desenvolvedor do AngularJS - Formulários informam que existem muitos estilos e diretrizes sobre formulários e campos. Para cada um, uma classe CSS:

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

Qual é a diferença entre pristine/dirty, e touched/untouched?

angularjs Luis Masuelli
fonte
3
Agora, isso está na documentação à qual você vinculou, sob o título "Usando classes CSS".
Bernhard Hofmann
1
Você está certo :) Althought parece um pouco novo (ao lado das novas classes define)
Luis Masuelli

Respostas:

220

Guia do desenvolvedor do AngularJS - classes CSS usadas pelo AngularJS

  • @property {boolean} $ intocado True se o controle ainda não perdeu o foco.
  • @property {boolean} $ tocou True se o controle perdeu o foco.
  • @property {boolean} $ pristine True se o usuário ainda não interagiu com o controle.
  • @property {boolean} $ dirty True se o usuário já tiver interagido com o controle.
Yuriy Rozhovetskiy
fonte
89

$pristine/ $dirtyinforma se o usuário realmente mudou alguma coisa, enquanto $touched/ $untouchedinforma se o usuário apenas esteve lá / visitou .

Isso é realmente útil para validação. O motivo $dirtyfoi sempre evitar mostrar respostas de validação até o usuário realmente visitar um determinado controle. Mas, usando apenas a $dirtypropriedade, o usuário não obteria feedback de validação a menos que realmente alterasse o valor. Portanto, um $invalidcampo ainda não mostraria ao usuário um prompt se o usuário não alterasse / interagisse com o valor. Se o usuário ignorou completamente um campo obrigatório, tudo parecia correto.

Com o Angular 1.3 e ng-touched, agora você pode definir um estilo específico em um controle assim que o usuário desfocar, independentemente de editar ou não o valor.

Aqui está um CodePen que mostra a diferença de comportamento.

XML
fonte
Estou procurando uma maneira de limpar os erros de validação do formulário. $ setPristine não faz isso. Eu já vi o formulário de sugestões de outros. $ SetUntouched, mas parece que isso não está disponível no angular 1.3 19 beta, que é a versão que estou usando. No entanto, posso chamar form.field_name. $ SetUntouched, mas fazer isso para todos os campos é oneroso, existe uma maneira melhor?
T. Rex
$setPristinesimplesmente torna o formulário un- $dirty. Eu acho que você pode querer form.setValidity(). Veja várias respostas úteis nesta postagem .
XML
14

No livro Pro Angular-6 está detalhado como abaixo;

  • válido : Esta propriedade retornará verdadeiro se o conteúdo do elemento for válido e falso, caso contrário.

  • invalid : Esta propriedade retornará true se o conteúdo do elemento for inválido e false, caso contrário.

  • pristine : Esta propriedade retorna true se o conteúdo do elemento não tiver sido alterado.

  • dirty : Esta propriedade retorna true se o conteúdo do elemento foi alterado .
  • intocado : Esta propriedade retornará verdadeiro se o usuário não tiver visitado o elemento.
  • tocado : Esta propriedade retornará verdadeiro se o usuário tiver visitado o elemento.
fgul
fonte
6

Vale ressaltar que as propriedades de validação são diferentes para formulários e elementos de formulário (observe que tocado e intocado são apenas para campos):

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.
Yvonne Aburrow
fonte