Question

我在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 link

您可以在控制台中看到，当其中一个模型发生变化时，它会运行所有功能。

Answer 1

我认为这是正常行为。每次模型更改时，都会重新执行ng-disabled中的条件。因此，每次在输入中输入内容时，您都会获得2 console.log。然后，如果函数返回为true，则会禁用组件，否则启用它。

当在一个表单中进行更改时，ng-disabled将触发所有表单验证

1 个答案: