AngularJS: diferencia entre prístino / sucio y tocado / sin tocar

158

Guía del desarrollador de AngularJS: los formularios indican que hay muchos estilos y directivas con respecto a los formularios y campos. Para cada uno, una clase CSS:

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

¿Cuál es la diferencia entre pristine/dirtyy touched/untouched?

angularjs Luis Masuelli
fuente
3
Esto se encuentra ahora en la documentación a la que se vinculó, bajo el título "Uso de clases CSS".
Bernhard Hofmann el
1
Tienes razón :) Aunque parece un poco nuevo (junto con las nuevas clases que define)
Luis Masuelli

Respuestas:

220

AngularJS Developer Guide - Clases CSS utilizadas por AngularJS

  • @property {boolean} $ sin tocar Verdadero si el control aún no ha perdido el foco.
  • @property {boolean} $ tocado True si el control ha perdido el foco.
  • @property {boolean} $ pristine Verdadero si el usuario aún no ha interactuado con el control.
  • @property {boolean} $ dirty True si el usuario ya ha interactuado con el control.
Yuriy Rozhovetskiy
fuente
89

$pristine/ $dirtyle dice si el usuario realmente cambió algo, mientras que $touched/ $untouchedle dice si el usuario simplemente ha estado allí / visitado .

Esto es realmente útil para la validación. El motivo $dirtysiempre fue evitar mostrar respuestas de validación hasta que el usuario haya visitado un cierto control. Pero, al usar solo la $dirtypropiedad, el usuario no recibiría comentarios de validación a menos que realmente modificaran el valor. Por lo tanto, un $invalidcampo aún no le mostrará al usuario un mensaje si el usuario no cambió / interactuó con el valor. Si el usuario ignoraba por completo un campo obligatorio, todo parecía estar bien.

Con Angular 1.3 y ng-touched, ahora puede establecer un estilo particular en un control tan pronto como el usuario se haya desdibujado, independientemente de si realmente editó el valor o no.

Aquí hay un CodePen que muestra la diferencia en el comportamiento.

XML
fuente
Estoy buscando una forma de borrar los errores de validación del formulario. form. $ setPristine no lo hace. He visto el formulario de sugerencias de otros. $ SetUntouched, pero parece que esto no está disponible en angular 1.3 19 beta, que es la versión que estoy usando. Sin embargo, puedo llamar a form.field_name. $ SetUntouched, pero hacer eso para todos los campos es una carga, ¿hay una mejor manera?
T. Rex
$setPristinesimplemente hace que la forma sea un- $dirty. Creo que puedes querer form.setValidity(). Vea varias respuestas útiles en esta publicación .
XML
14

En Pro Angular-6 el libro se detalla a continuación;

  • válido : esta propiedad devuelve verdadero si el contenido del elemento es válido y falso de lo contrario.

  • inválido : esta propiedad devuelve verdadero si el contenido del elemento es inválido y falso de lo contrario.

  • prístino : esta propiedad devuelve verdadero si no se ha cambiado el contenido del elemento.

  • sucio : esta propiedad devuelve verdadero si se ha cambiado el contenido del elemento .
  • intacto : esta propiedad devuelve verdadero si el usuario no ha visitado el elemento.
  • touch : esta propiedad devuelve verdadero si el usuario ha visitado el elemento.
fgul
fuente
6

Vale la pena mencionar que las propiedades de validación son diferentes para formularios y elementos de formulario (tenga en cuenta que tocado y no tocado son solo 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
fuente