Question

我需要在点击按钮后禁用提交按钮，以防止多次提交，但在此之前必须确保填写必填字段。

我试过

<body ng-app="ngToggle">
<div ng-controller="AppCtrl">
<form name="newUserForm">
<input type="text" required>
<input type="text" required>
<input type="text">
<button ng-click="disableClick()" ng-disabled="isDisabled" 
ng-model="isDisabled">Disable ng-click</button>
</form>
</div>
</body>

angular.module('ngToggle', [])
.controller('AppCtrl',['$scope', function($scope){
$scope.isDisabled = false;
$scope.disableClick = function() {
    alert("Clicked!");
    $scope.isDisabled = true;
    return false;
}
}]);

但这只会在没有任何验证的情况下禁用该按钮

Answer 1

好的，我得到你的意思/想要的，所以我会尝试帮助并提出一些代码 - 这显然是缺失的，但如果没有错过必要的代码，你就有了解决方案：）< / p>

首先，你必须正确地写你的表格：

<form name="newUserForm" ng-submit="disableClick(newUserForm.$valid)" novalidate> 
    <input type="text" name="input1" ng-model="form.input1"  required>
    <input type="text" name="input2" ng-model="form.input2"  required>
    <input type="text" name="input3" ng-model="form.input3"> //not required
    <button type="submit" ng-disabled="isDisabled">Disable ng-click</button>
</form>

所以我们在这里得到了你所缺少的东西：

您确实为自己的表单命名，但是您错过了一个提交，其形式为ng-submit或type =“submit”的按钮，该提交将提交表单，并在验证发生时
为了让Angular验证您的输入，他们需要有ng-model，否则它将无法验证（HTML5验证会，但继续阅读）
我添加了novalidate，所以我们告诉浏览器“嘿，我们需要这个验证但不是你，所以什么都不做”，Angular接管
最后但并非最不重要的是，Angular在表单中添加了几个属性（请参阅此处：Angular form Docs），$ valid是其中之一，当所有经过验证的输入都有效时，设置为true。 / LI>
因此，这总结了您需要对表单进行的更改。

至于Javascript部分，只有一个小变化：
```
$scope.disableClick = function(valid) {
  if(valid && !$scope.isDisabled) {
    $scope.isDisabled = true;
  }
  return false;
}
```
我猜这个变化是显而易见的，但无论如何我都会解释 - 检查newUserForm。$ valid（boolean），如果它是真的（意味着表单已通过验证），请禁用此按钮。

当然，您必须添加检查才能在任何类型的提交上运行代码，而不仅仅是禁用按钮（可以通过Dev Tools轻松重新启用），这就是我添加的原因！$ scope .isDisabled到if语句。

希望这能回答你的问题：）

P.S。这是Plunker
中正在运行的演示

Angular：在表单中填写必填字段后单击“禁用”按钮

1 个答案: