В AngularJS, какая разница между ng-первозданными и ng-грязными?

Ответ 1

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

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

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

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

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

Ответ 2

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

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

Ответ 3

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

Ответ 4

Как уже было сказано в предыдущих ответах, 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>

Ответ 5

ng-первозданный ($ чистый)

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

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

Boolean True, если используется форма/ввод (, измененный пользователем)

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

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

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