Question

如果其中一个输入字段发生更改，我希望为整个表单执行等效的ng-change。

我知道，因为AngularJS 1.3我有去抖动选项，但它仅适用于单个输入。

我正在寻找适用于整个表单的“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用于说明。

请注意，＆＃34;更改＆＃34;根据{{3}}

，仅在模糊文本输入时触发事件

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

Answer 2

一个＆＃34; hacky＆＃34;这样做的方法是将观察者设置为脏的形式，根据您的要求有效，您可以执行类似

的操作

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

这将在每次修改表单时执行，如果您只想在可以执行的有效修改表单上执行代码

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

如果您只想在表单步入$ valid状态时执行代码，只需要设置您的观察者表单。$ valid＆＃39;

如果您不想使用观察者污染您的范围，您可以随时在表单周围创建一个指令，公开更改的api事件并在内部照顾观察者

Answer 3

根据Eric Soyke的评论，您可以查看关键字事件的表单更改。

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

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

Answer 4

好的，超级超级迟来的答案...但这很整洁

// html
<form name="$ctrl.form">...</form>

// controller
function $postLink() {
    ctrl.form.$$element.on('change', function () {
        console.log('fired');
    });
}

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

4 个答案: