整个表单的类似于ngChange的功能

Question

ng-change每当其中一个输入字段发生更改时,我想为整个表单执行等效操作.

我知道,因为AngularJS 1.3我有debounce选项,但它仅适用于单个输入.

我正在寻找适用于整个表单的"debounce"/"on change"功能.

Answer 1

ng-change表单没有内置的方法.

甚至可能不需要它,因为如果您正确组织了视图模型,那么表单输入可能绑定到某个范围暴露的属性:

$scope.formData = {};

并在视图中:

<form name="form1">
  <input ng-model="formData.a">
  <input ng-model="formData.b">
</form>

然后你可以深入观察(带$watch)模型的变化(并在你需要的元素上应用任何去抖动选项):

$scope.$watch("formData", function(){
  console.log("something has changed");
}, true);

当然,问题是这是一个深刻的手表而且价格昂贵.此外,它不仅会对表单中的更改做出反应,还会对formData任何来源的更改做出反应.

因此,作为替代方案,您可以创建自己的指令来补充表单并对表单的更改事件做出反应.

.directive("formOnChange", function($parse){
  return {
    require: "form",
    link: function(scope, element, attrs){
       var cb = $parse(attrs.formOnChange);
       element.on("change", function(){
          cb(scope);
       });
    }
  }
});

用法是:

<form name="form1" form-on-change="doSomething()">
  <input ng-model="formData.a">
  <input ng-model="formData.b">
</form>

用于插图的plunker.

请注意,根据jQuery文档,"change"事件仅针对文本输入的模糊触发:

在change当其值改变事件发送给一个元素.此事件仅限于<input>元素,<textarea>框和<select>元素.对于选择框,复选框和单选按钮,当用户使用鼠标进行选择时会立即触发事件,但对于其他元素类型,事件将延迟,直到元素失去焦点.

Answer 2

一个"hacky"方法是通过将一个观察者设置为脏的形式,根据您的要求有效,您可以执行类似的操作

   $scope.$watch('form.$dirty',function(v){
         if(!v){return}
         form.$setPristine()
         /*do something here*/
    })

如果您只想在有效的修改表单上执行代码,那么每次修改表单时都会执行此操作

       if(!v || form.$invalid){return}

如果你只想在表单步骤为$ valid状态时执行你的代码,只需要为'form.$ valid'设置你的观察者.

如果你不喜欢用观察者污染你的范围,你总是可以在表格周围创建一个指令,公开一个变化的api事件并在内部照顾观察者

Answer 3

根据Eric Soyke的评论,您可以在keyup事件上查看表单更改.

这样你就可以简单地使用内置指令ng-keyup:

<form name="form1" ng-keyup="doSomething()">