javascript - ng-disabled 在 chrome 中不起作用。按钮在 Angular 中未禁用

Question

我的要求是:

1. 在验证所有字段之前应禁用“提交”按钮。
2. 验证所有字段后，“提交”按钮应可供用户点击。
3. 用户点击按钮后，应再次禁用“提交”按钮。

我使用了下面的代码:

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

在 Controller 中我使用了

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

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

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

上述情况在 IE 和 Firefox 中运行良好，但在 Chrome 中不起作用。
我已经在 Chrome 中打开了表单，按钮没有显示为禁用，而在 IE 和 Firefox 中则显示为禁用，甚至表单尚未提交。

谢谢。

Answer 1

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

Controller :

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