No AngularJS, qual é a diferença entre ng-pristine e ng-dirty?

Quais são as diferenças entre ng-pristinee ng-dirty? Parece que você pode ter os dois para ser true:

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

A ng-dirtyclasse informa que o formulário foi modificado pelo usuário, enquanto a ng-pristineclasse informa que o formulário não foi modificado pelo usuário. Assim, ng-dirtye ng-pristinesão dois lados da mesma história.

As classes são definidas em qualquer campo, enquanto o formulário tem duas propriedades, $dirtye $pristine.

Você pode usar a $scope.form.$setPristine()função para redefinir um formulário para o estado original (observe que este é um recurso do AngularJS 1.1.x).

Se você quiser um $scope.form.$setPristine()comportamento -ish mesmo no branch 1.0.x do AngularJS, você precisa lançar sua própria solução (algumas muito boas podem ser encontradas aqui ). Basicamente, isso significa iterar todos os campos do formulário e definir seu $dirtysinalizador como false.

Espero que isto ajude.

pristine nos diz se um campo ainda é virgem, e sujo nos diz se o usuário já digitou algo no 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>

Um campo que registrou um único evento de keydown não é mais virgem (não mais puro) e, portanto, está sujo para sempre.

Ambas as diretivas obviamente servem ao mesmo propósito e, embora pareça que a decisão da equipe angular de incluir ambas interfere no princípio DRY e aumenta a carga útil da página, ainda é bastante prático ter as duas por perto. É mais fácil estilizar seus elementos de entrada, pois você tem .ng-pristine e .ng-dirty disponíveis para estilizar seus arquivos css. Acho que esse foi o principal motivo para adicionar as duas diretivas.

Conforme já afirmado nas respostas anteriores, ng-pristineserve para indicar que o campo não foi modificado, ng-dirtye para informar que foi modificado. Por que precisa de ambos?

Digamos que temos um formulário com telefone e endereço de e-mail entre os campos. É necessário telefone ou e-mail, e você também deve notificar o usuário quando houver dados inválidos em cada campo. Isso pode ser feito usando ng-dirtye 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)

Boolean True se o formulário / entrada ainda não foi usado ( não foi modificado pelo usuário )

ng-dirty ($ dirty)

Boolean True se o formulário / entrada foi usado ( modificado pelo usuário )

$ setDirty (); Define o formulário em um estado sujo. Este método pode ser chamado para adicionar a classe 'ng-dirty' e definir o formulário para um estado sujo (classe ng-dirty). Este método propagará o estado atual para os formulários pais.

$ setPristine (); Define o formulário em seu estado original. Este método define o estado $ pristine do formulário como true, o estado $ dirty como false, remove a classe ng-dirty e adiciona a classe ng-pristine. Além disso, ele define o estado $ enviado como falso. Este método também se propagará para todos os controles contidos neste formulário.

Definir um formulário de volta a um estado original é freqüentemente útil quando queremos 'reutilizar' um formulário após salvá-lo ou reiniciá-lo.