ng-disabled 在 chrome 中不起作用。Button 没有在 Angular 中禁用

Posted 2023-05-09

【中文标题】ng-disabled 在 chrome 中不起作用。Button 没有在 Angular 中禁用

【英文标题】：ng-disabled is not working in chrome .Button is not disabling in angular

【发布时间】：2016-09-12 23:37:36

【问题描述】：

我的要求是：

在验证所有字段之前应禁用提交按钮。 验证所有字段后，应启用提交按钮以供用户单击。 一旦用户单击按钮，应禁用再次提交按钮。

我使用了以下代码：

<button type="submit" class="btn" data-ng-disabled="signup.$invalid" ng-disabled="isDisabled" data-ng-click="saveNewUser()">Submit</button>

在控制器中我使用过

$scope.saveNewUser = function () 
                    $scope.isDisabled = true;

如果任何字段未验证并出错

 if(genderError || stateError || dobError)
                    $scope.isDisabled = false;

以上案例在 IE 和 Firefox 中运行良好，但在 Chrome 中无法运行。 我在 Chrome 中打开了表单，按钮没有显示为禁用，而在 IE 和 Firefox 中显示为禁用，即使表单尚未提交。

谢谢。

【问题讨论】：

您能否提供一个小提琴或工作示例以及您的无响应代码？

另外，你不应该引用两个ng-disabled 属性，就像你目前正在做的data-ng-disabled="signup.$invalid" ng-disabled="isDisabled" 一样。相反，只需执行ng-disabled="signup.$invalid || isDisabled"

【参考方案1】：

我已经使用 Codepen 设置了一个基本示例，并让它在 Mac 上的 Firefox、Safari 和 Chrome 中运行。

控制器：

var app = angular.module('app', []);
app.controller('myctrl', ['$scope', function($scope)
  var genderError = false;
  var stateError = false;
  var dobError = false;

  $scope.saveNewUser = function () 
    $scope.isDisabled = true;

    if(genderError || stateError || dobError) 
      $scope.isDisabled = false; 
    
  
]);

HTML：

<form name="signup">
    <button type="submit" class="btn" ng-disabled="signup.$invalid || isDisabled" ng-click="saveNewUser()">Submit</button>
</form>

我相信您的错误很可能是在您的按钮上同时引用了 data-ng-disabled 和 ng-disabled。浏览器可以用不同的方式解释这一点。相反，我在按钮上将它们合并为单个属性，如 ng-disabled="signup.$invalid || isDisabled"。

WORKING EXAMPLE