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

Guía para desarrolladores de AngularJS – Formularios enumera muchos estilos y directivas con respecto a 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?

Guía para desarrolladores de AngularJS: clases de CSS utilizadas por AngularJS

• @property {boolean} $untouched True si el control aún no ha perdido el foco.
• @property {boolean} $touched True si el control ha perdido el foco.
• @property {boolean} $pristine True si el usuario aún no ha interactuado con el control.
• @property {boolean} $dirty True si el usuario ya ha interactuado con el control.

$pristine/$dirty le dice si el usuario realmente cambió cualquier cosa, mientras $touched/$untouched le dice si el usuario simplemente ha estado allí/visitado.

Esto es realmente útil para la validación. La razón por $dirty siempre fue para evitar mostrar respuestas de validación hasta que el usuario haya visitado un determinado control. Pero, usando sólo el $dirty propiedad, el usuario no recibiría comentarios de validación a menos que realmente modificara el valor. Entonces, un $invalid el campo aún no mostraría al usuario un aviso si el usuario no cambiara/interactuara con el valor. Si el usuario simplemente tabuló a través de un campo obligatorio, ignorándolo, todo se veía bien hasta que lo envió.

Con Angular 1.3 y ng-touchedahora puede establecer un estilo particular en un control tan pronto como el usuario haya visitado y luego desenfocado, independientemente de si realmente editó el valor o no.

Aquí está un CódigoPen que muestra la diferencia en el comportamiento.

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

• válido: Esta propiedad devuelve verdadero si el contenido del elemento es válido y falso en caso contrario.

• inválido: Esta propiedad devuelve verdadero si el contenido del elemento no es válido y es falso en caso contrario.

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

• sucio: Esta propiedad devuelve verdadero si el contenido del elemento ha sido cambiado.
• intacto: Esta propiedad devuelve verdadero si el usuario no ha visitado el elemento.
• tocado: Esta propiedad devuelve verdadero si el usuario ha visitado el elemento.

Esta es una respuesta tardía, pero espero que esto pueda ayudar.

Escenario 1: visitó el sitio por primera vez y no tocó ningún campo. El estado de forma es

ng-sin tocar y ng-prístino

Escenario 2: actualmente está ingresando los valores en un campo particular en el formulario. Entonces el estado es

ng-sin tocar y ng-sucio

Escenario 3: Ha terminado de ingresar los valores en el campo y pasó al siguiente campo

ng-tocado y ng-sucio

Escenario 4: Supongamos que un formulario tiene un campo de número de teléfono. Ha ingresado el número pero en realidad ha ingresado 9 dígitos pero se requieren 10 dígitos para un número de teléfono. Entonces el estado es
ng-inválido

En breve:

ng-sin tocar:Cuando el campo del formulario aún no ha sido visitado

ng-tocado: Cuando se visita el campo del formulario Y el campo ha perdido el foco

ng-prístino: El valor del campo de formulario no cambia

ng-sucio: Se cambia el valor del campo de formulario

ng-válido : Cuando todas las validaciones de los campos del formulario son exitosas

ng-inválido: Cuando cualquier validación de los campos del formulario no es exitosa

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