angularjs - 根据值检查 Angular 形脏状态

Question

我有一个简单的 Angular 形式，就像这样 example .

js:

angular.module('myApp', []).controller('AppController', function($scope) {
  $scope.values = {
    value: 'default'
  }; 
});

html:

<form name="form">
  <div class="form-group">
    <label for="input">Value</label>
    <input type="text" class="form-control" ng-model="values.value">
  </div>
  <pre>form.$dirty = {{form.$dirty}};</pre>
</form>

我想跟踪我的来源的脏信息，并在值返回到原始状态时将表单状态设置为原始状态。

有没有一种方法可以说 Angular 认为这是一个原始值，并且仅在不等于该值的情况下才形成脏值？

在我的示例中，当用户键入内容然后输入 default 时，我希望看到 from.$dirty = true。

Answer 1

如果没有其他解决方案，我编写了以下指令，允许以声明方式执行此操作。

指令:

angular.module('myApp').directive('trackValue', function() {
  return {
    require: 'ngModel',
    link: function(s, e, a, ngModelCtrl) {
      ngModelCtrl.$setOriginalValue = function(value) {
        ngModelCtrl.$originalValue = angular.copy(value);
      }
      ngModelCtrl.$parsers.push(function(value) {
        if(angular.equals(value, ngModelCtrl.$originalValue)) {
          ngModelCtrl.$setPristine();
        }
        return value;
      });
    }
  }
});

然后您可以保存值，并将表单的更改与其进行比较。

$scope.form.value.$setOriginalValue($scope.values.value);

我已更新my plunker我通过该指令获得了所需的行为。您可以将输入值更改为任何值，但是当您再次输入 default 时，输入状态将重置为原始状态