В чем разница между ng-pristine и ng-dirty в AngularJS?

В чем разница между ng-pristineи ng-dirty? Кажется, у вас могут быть оба true:

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

ng-dirtyКласс говорит вам , что форма была изменена пользователем, в то время как ng-pristineкласс говорит вам , что форма не была изменена пользователем. Так ng-dirtyи ng-pristineдве стороны одной и той же истории.

Классы устанавливаются для любого поля, а форма имеет два свойства $dirtyи $pristine.

Вы можете использовать эту $scope.form.$setPristine()функцию для сброса формы до первоначального состояния (обратите внимание, что это функция AngularJS 1.1.x).

Если вам нужно $scope.form.$setPristine()-ish поведение даже в ветке 1.0.x AngularJS, вам нужно развернуть собственное решение (можно найти несколько довольно хороших здесь ). По сути, это означает перебор всех полей формы и установку их$dirtyфлага наfalse.

Надеюсь это поможет.

pristine сообщает нам, остается ли поле девственным, а dirty сообщает нам, что пользователь уже набрал что-нибудь в связанном поле:

<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>

Поле, в котором зарегистрировано одно событие нажатия клавиши, больше не является девственным (не более чистым) и, следовательно, является грязным навсегда.

Обе директивы, очевидно, служат одной и той же цели, и хотя кажется, что решение команды angular включить обе противоречит принципу DRY и увеличивает полезную нагрузку страницы, все же довольно практично иметь их обе. Легче стилизовать элементы ввода, поскольку в файлах css для стилизации доступны как .ng-pristine, так и .ng-dirty. Я думаю, это была основная причина добавления обеих директив.

Как уже указывалось в более ранних ответах, ng-pristineдля указания того, что поле не было изменено, тогда ng-dirtyкак для сообщения, что оно было изменено. Зачем нужны оба?

Допустим, у нас есть форма с телефоном и адресом электронной почты среди полей. Требуется либо телефон, либо электронная почта, и вы также должны уведомлять пользователя, когда у него есть недопустимые данные в каждом поле. Этого можно добиться, используя ng-dirtyи ng-pristineвместе:

<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 ($ нетронутый)

Boolean Истина, если форма / ввод еще не использовались ( не изменялись пользователем )

ng-dirty ($ грязный)

Логическое значение Истина, если форма / ввод уже использовались ( изменены пользователем )

$ setDirty (); Устанавливает форму в грязное состояние. Этот метод можно вызвать для добавления класса ng-dirty и установки формы в грязное состояние (класс ng-dirty). Этот метод распространит текущее состояние на родительские формы.

$ setPristine (); Устанавливает форму в исходное состояние. Этот метод устанавливает состояние $ pristine формы в значение true, состояние $ dirty в значение false, удаляет класс ng-dirty и добавляет класс ng-pristine. Кроме того, он устанавливает для состояния $ submit значение false. Этот метод также будет распространяться на все элементы управления, содержащиеся в этой форме.

Возвращение формы в исходное состояние часто бывает полезно, когда мы хотим «повторно использовать» форму после ее сохранения или сброса.