ng-disabled запускает проверку всех форм, когда изменения сделаны в одной форме

У меня есть несколько форм на HTML-странице, где каждая выполняет некоторые операции, такие как добавление, редактирование.

Каждая форма имеет директиву ng-disabled, которая проверяет некоторые условия и запускает соответствующую функцию ng-disabled, когда происходят некоторые изменения.

Проблема в том, что она запускает все функции ng-disabled каждой формы, когда кто-либо изменяет значения в одной форме.

Код:

<body ng-controller="MainCtrl">
    <div ng-form="myForm">
      <input type="text" required ng-model="user.name" placeholder="Username">

      <button ng-click="doSomething()" ng-disabled="check() || myForm.$invalid">DO</button>
    </div>

     <div ng-form="myForm2">
      <input type="text" required ng-model="user.name2" placeholder="Username">

      <button ng-click="doSomething2()" ng-disabled="check2() || myForm2.$invalid">DO</button>
    </div>

  </body>

Код скрипта:

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';

  $scope.check = function() {
    console.log("check called");
  }

   $scope.check2 = function() {
    console.info("check two called");
  }

});

Plnkr ссылка

Вы можете видеть в консоли, что все функции выполняются при изменении одной из моделей.

Источник

1 ответ

Я думаю, что это нормальное поведение. Условие внутри вашего ng-disabled повторяется каждый раз, когда ваши модели меняются. Итак, вы получите 2 console.log каждый раз, когда вы вводите что-то в свои данные. Затем, если возвращение вашей функции истинно, он отключает ваш компонент, иначе он включает его.

Источник
Другие вопросы по тегам