Подтвердить что ты не робот

NgВыберите функцию для всей формы

Я хотел бы сделать эквивалент ng-change для всей формы всякий раз, когда есть изменение в одном из его полей ввода.

Я знаю, что с AngularJS 1.3 у меня есть опция debounce, но она применяется только для одного входа.

Я ищу функциональность "debounce" / "on change", которая будет применяться для всей формы.

4b9b3361

Ответ 1

Для формы не существует встроенного способа ng-change.

Это может даже не понадобиться, потому что, если вы правильно организовали свою модель представления, то ваши входы формы, вероятно, связаны с определенным областью видимости:

$scope.formData = {};

и в представлении:

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

Затем вы можете глубоко (с помощью $watch) просмотреть изменения модели (и применить любую опцию debounce для элементов, которые вам нужны):

$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 для иллюстрации.

Обратите внимание, что событие "change" запускается только при размывании текстового ввода, согласно документации jQuery:

Событие change отправляется элементу при изменении его значения. Это событие ограничено <input> элементами, <textarea> и <select> элементами. Для флажков выбора, флажков и переключателей событие запускается немедленно, когда пользователь делает выбор с помощью мыши, но для других типов элементов событие откладывается до тех пор, пока элемент не теряет фокус.

Ответ 2

один "хакерский" способ сделать это, установив наблюдателя в форму, грязную, действительную в зависимости от ваших требований, вы можете сделать что-то вроде

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

это будет выполняться каждый раз, когда форма будет изменена, если вы хотите только выполнить свой код в действительной модифицированной форме, которую вы можете сделать

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

и если вы хотите выполнить свой код только в том случае, если шаг формы в $valid state просто нужно настроить своего наблюдателя для формы. $valid '

если вам не нравится загрязнять область видимости наблюдателями, вы всегда можете создать директиву вокруг формы, которая предоставляет событие api с изменением и внутренне заботится о наблюдателе

Ответ 3

В соответствии с комментарием Эрика Сойке вы можете подключить проверку изменения формы в событии keyup.

Таким образом, вы можете просто использовать встроенную директиву ng-keyup:

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