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

Question

我的要求是：

在验证所有字段之前应禁用提交按钮。
一旦所有字段都通过验证，提交按钮应该可以被用户点击。
一旦用户点击按钮，提交按钮应该再次被禁用。

我使用了以下代码：

<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 中显示为禁用时未显示禁用，即使表单尚未提交。

谢谢。

Answer 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

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

ng-disabled is not working in chrome .Button is not disabling in angular

javascript

forms

jquery

form-submit

angularjs