Saltar al contenido

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

Solución:

los ng-dirty clase le dice que el formulario ha sido modificado por el usuario, mientras que el ng-pristine class le dice que el formulario no ha sido modificado por el usuario. Entonces ng-dirty y ng-pristine son dos caras de la misma historia.

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

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

Si quieres un $scope.form.$setPristine()-ish incluso en la rama 1.0.x de AngularJS, necesita lanzar su propia solución (se pueden encontrar algunas bastante buenas aquí). Básicamente, esto significa iterar sobre todos los campos de formulario y establecer su $dirty bandera a 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.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)


Tags : /

Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *