En AngularJS, ¿cuál es la diferencia entre ng-pristine y ng-dirty?

¿Cuáles son las diferencias entre ng-pristiney ng-dirty? Parece que puedes tener ambos para ser true:

$scope.myForm.$pristine = true; // after editing the form

La ng-dirtyclase te dice que el formulario ha sido modificado por el usuario, mientras que la ng-pristineclase te dice que el formulario no ha sido modificado por el usuario. Así ng-dirtyy ng-pristineson dos caras de la misma historia.

Las clases se establecen en cualquier campo, mientras que el formulario tiene dos propiedades $dirtyy $pristine.

Puede usar la $scope.form.$setPristine()función para restablecer un formulario a un estado prístino (tenga en cuenta que esta es una función de AngularJS 1.1.x).

Si desea un $scope.form.$setPristine()comportamiento -ish incluso en la rama 1.0.x de AngularJS, necesita lanzar su propia solución (algunas bastante buenas se pueden encontrar aquí ). Básicamente, esto significa iterar sobre todos los campos de formulario y establecer su $dirtymarca en false.

Espero que esto ayude.

pristine nos dice si un campo aún es virgen, y dirty nos dice si el usuario ya ha escrito algo en el campo relacionado:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<form ng-app="" name="myForm">
  <input name="email" ng-model="data.email">
  <div class="info" ng-show="myForm.email.$pristine">
    Email is virgine.
  </div>
  <div class="error" ng-show="myForm.email.$dirty">
    E-mail is dirty
  </div>
</form>

Un campo que ha registrado un solo evento de keydown ya no es virgen (no más prístino) y, por lo tanto, está sucio para siempre.

Ambas directivas obviamente tienen el mismo propósito, y aunque parece que la decisión del equipo angular de incluir ambas interfiere con el principio DRY y se suma a la carga útil de la página, todavía es bastante práctico tenerlos a ambos alrededor. Es más fácil diseñar sus elementos de entrada, ya que tiene disponibles tanto .ng-pristine como .ng-dirty para diseñar en sus archivos css. Supongo que esta fue la razón principal para agregar ambas directivas.

Como ya se indicó en respuestas anteriores, ng-pristinees para indicar que el campo no se ha modificado, mientras que ng-dirtyes para indicar que se ha modificado. ¿Por qué necesitar ambos?

Digamos que tenemos un formulario con teléfono y dirección de correo electrónico entre los campos. Se requiere teléfono o correo electrónico, y también debe notificar al usuario cuando tenga datos no válidos en cada campo. Esto se puede lograr usando ng-dirtyy ng-pristinejuntos:

<form name="myForm">
    <input name="email" ng-model="data.email" ng-required="!data.phone">
    <div class="error" 
         ng-show="myForm.email.$invalid && 
                  myForm.email.$pristine &&
                  myForm.phone.$pristine">Phone or e-mail required</div>
    <div class="error" 
         ng-show="myForm.email.$invalid && myForm.email.$dirty">
        E-mail is invalid
    </div>

    <input name="phone" ng-model="data.phone" ng-required="!data.email">
    <div class="error" 
         ng-show="myForm.phone.$invalid && 
                  myForm.email.$pristine &&
                  myForm.phone.$pristine">Phone or e-mail required</div>
    <div class="error" 
         ng-show="myForm.phone.$invalid && myForm.phone.$dirty">
        Phone is invalid
    </div>
</form>

ng-pristine ($ pristine)

Booleano Verdadero si el formulario / entrada aún no se ha utilizado ( no modificado por el usuario )

ng-dirty ($ sucio)

Booleano Verdadero si se ha utilizado el formulario / entrada ( modificado por el usuario )

$ setDirty (); Establece el formulario en un estado sucio. Se puede llamar a este método para agregar la clase 'ng-dirty' y establecer el formulario en un estado sucio (clase ng-dirty). Este método propagará el estado actual a los formularios principales.

$ setPristine (); Establece el formulario en su estado original. Este método establece el estado $ pristine del formulario en verdadero, el estado $ sucio en falso, elimina la clase ng-dirty y agrega la clase ng-pristine. Además, establece el estado $ enviado en falso. Este método también se propagará a todos los controles contenidos en este formulario.

Volver a establecer un formulario en un estado prístino suele ser útil cuando queremos 'reutilizar' un formulario después de guardarlo o restablecerlo.