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

ng-disabled fires all form validation when changes made in one form

本文关键字：表单 ng-disabled 验证 一个      更新时间：2023-09-26

我在html页面中有多个表单，每个表单都执行一些操作，例如添加，编辑。

每个表单都有 ng-disabled 指令，该指令检查某些条件，并在发生某些更改时触发相应的 ng-disabled 函数。

问题是当一个表单中的值更改时，它会触发每个表单的所有 ng 禁用函数。

法典： 

<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

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

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

相关文章：