首页 文章

ng-disabled在chrome中没有工作.Button没有在angular中禁用

提问于
浏览 次
1

我的要求是：

在验证所有字段之前，应禁用

  • 提交按钮 .

  • 验证完所有字段后，应启用“提交”按钮以便用户单击 .

  • 用户单击按钮后，应再次禁用“提交”按钮 .

我使用下面的代码：

<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中显示禁用时未显示已禁用甚至表单尚未提交 .

谢谢 .

javascript jquery angularjs forms form-submit

1 回答

  • 0

    我已经使用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

    回复于

相关问题