排除控制影响形式 $pristine
Exclude control from affecting form $pristine
我在指令中有一个文本输入,我想将其用作显示项目列表的过滤器,但我不希望过滤器的输入影响包含的表单 $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
您可以覆盖 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;
}
}
});
我fork了你的plunker,你可以试试解决方法:
http://plnkr.co/edit/6UVTQjJtwu4mOXVt7sPT?p=preview
编辑:
更新了 plunker 以遵循您的代码风格。我将原样保留代码。
我在指令中有一个文本输入,我想将其用作显示项目列表的过滤器,但我不希望过滤器的输入影响包含的表单 $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
您可以覆盖 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;
}
}
});
我fork了你的plunker,你可以试试解决方法: http://plnkr.co/edit/6UVTQjJtwu4mOXVt7sPT?p=preview
编辑: 更新了 plunker 以遵循您的代码风格。我将原样保留代码。