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中显示禁用按钮时显示已禁用，甚至还没有提交表格。

感谢。

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 .Button未在角度

1 个答案: