Почему форма Angular JS. $Pristine не изменяется с прямой манипуляцией JS

Я хотел бы настроить отображение элементов формы, таких как активированный/отключенный атрибут кнопки, проверив исходную настройку Angular JS.

Когда событие щелчка запускает форму, первоначальное значение изменяется, как я ожидал, но когда я манипулирую переменной области видимости напрямую, форма первоначальной настройки не изменяется, даже если элемент управления формы привязан к этой переменной.

См. следующий JSfiddle:

http://jsfiddle.net/nicholasporter/2h7wT/3/

Я ожидал бы, что изменение логического значения приведет к изменению первоначальной настройки форм, когда элемент управления привязан к переменной области видимости. Есть ли лучший способ проверить это? Есть ли лучший способ настроить кнопки или другие элементы DOM, когда в форме ничего не изменилось? Спасибо заранее за любые указатели. Вот код, если JSfiddle не работает.

 <div ng-app ng-controller="MyCtrl">
    <form novalidate name="myForm">
    {{myBool}}

      <input type="checkbox" ng-model="myBool" />
      <button ng-click="myBool=!myBool">JS set</button>
        <div>Form Pristine:{{myForm.$pristine}}</div>
    </form>
  </div>


<script>
    function MyCtrl($scope){
        $scope.myBool = false;
    }
</script>

Ответ 1

Свойство $pristine ввода с директивой ng-model изменяется только тогда, когда используется его метод ngModelControllers $setViewValue(), то есть посредством взаимодействия с пользователем на элементе ввода или путем вызова этого метода самостоятельно.

Это связано с тем, что нетронутое состояние используется для отслеживания того, что вы изменили (изменили любые входные элементы ng-model -enabled) в форме. Это не означает, что значения в входах равны значениям в модели, они всегда обновляются после каждого нажатия клавиши! Нет автоматического пути к reset форме в нетронутую, вы должны сами решить, когда это сделать, вызывая form.$setPristine().

Если вы хотите reset узнать первоначальную информацию в своем примере, вам нужно сообщить форме reset сам, привязывая кнопку к функции в области:

$scope.toggleBool = function() {
  $scope.myBool = !$scope.myBool;
  $scope.myForm.$setPristine();
}

Если вы хотите иметь отдельный набор значений для формы и для исходного состояния объекта, вы должны клонировать объект, а затем использовать клон в форме. В противном случае все изменения всегда сразу изменяют исходный объект.

Затем вы можете определить состояние формы, выполнив глубокое сравнение исходного объекта с клоном.

ОБНОВЛЕНИЕ май '15. Этот ответ исходит от 2013 года. ngModelController приобрел значительно более богатый API в последних версиях из Angular (в настоящее время 1.4), который предлагает некоторые механизмы для управления состоянием формы.