排除控制影响表单 $pristine答案

【问题标题】：Exclude control from affecting form $pristine排除控制影响表单 $pristine
【发布时间】：2018-01-03 03:28:20
【问题描述】：

我在指令中有一个文本输入，我想将其用作显示项目列表的过滤器，但我不希望输入过滤器影响包含表单的 $pristine 值，以便输入过滤器不启用保存并显示重置。如何在 angularJS (1.6.x) 中执行此操作？

指令模板

<form name='myForm'>
    <input placeholder="Filter" class='form-control' type='text' ng-model='vm.searchText'>
    <ul><li ng-repeat='item in vm.list | filter:vm.searchText'/></ul>
    <div>
        <br>
        <button class='btn btn-primary' ng-click='vm.save()' ng-disabled="myForm.$pristine || frmCrm.$invalid">Save</button>
        <div class='pull-right'>
            <button class='btn btn-warning' ng-click="vm.reset()" ng-hide="myForm.$pristine">Reset</button>
        </div>
    </div>
</form>

是的，我知道在这个例子中我可以很容易地将过滤器输入放在表单之外，但在我的实际情况下，这是不可行的，因为我有嵌套的表单和一个基本上包裹整个页面的表单。

这是 plnkr 示例： http://plnkr.co/edit/y1dJLPbyvlZuIW1f7ey9

【问题讨论】：

标签： angularjs angularjs-directive angularjs-filter angularjs-forms angular1.6

【解决方案1】：

您可以覆盖 ngModel 的 $setDirty 和 $setPristine 方法：

angular.module('xyz').directive('dontCheck', function() {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, element, attrs, ngModelCtrl) {
      //set to empty functions
      ngModelCtrl.$setPristine = angular.noop;
      ngModelCtrl.$setDirty = angular.noop;
    }
  }
});

我已经分叉了你的 plunker，你可以试试这个解决方案： http://plnkr.co/edit/6UVTQjJtwu4mOXVt7sPT?p=preview

编辑：更新了 plunker 以遵循您的代码风格。我将保留代码原样。

【讨论】：