Angularjs 角度：在表单中填写必填字段后，单击“禁用”按钮_Angularjs

Angularjs 角度：在表单中填写必填字段后，单击“禁用”按钮

angularjs

Angularjs 角度：在表单中填写必填字段后，单击“禁用”按钮,angularjs,Angularjs,我需要在单击按钮后禁用submit按钮，以防止多次提交，但在提交之前，它必须确保已填充所需的字段我试过了 <body ng-app="ngToggle"> <div ng-controller="AppCtrl"> <form name="newUserForm"> <input type="text" required> <input type="text" required> <input type="text"> &

我需要在单击按钮后禁用submit按钮，以防止多次提交，但在提交之前，它必须确保已填充所需的字段

我试过了

<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;
}
}]);


禁用ng单击
角度。模块（'ngToggle'，[]）
.controller（'AppCtrl'，['$scope'，函数（$scope）{
$scope.isDisabled=false；
$scope.disableClick=function（）{
警报（“单击！”）；
$scope.isDisabled=true；
返回false；
}
}]);

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

好的，我明白你的意思/想要的，所以我会尝试帮助你，并提出一些代码-显然缺少一些代码，但如果没有缺少必要的代码，你就有了解决方案：）

首先，您必须正确填写您的表格：

<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>

我想变化是显而易见的，但我还是要解释一下-检查newUserForm.$valid（布尔值），如果它是真的（意味着表单已经通过了验证），禁用这个按钮

当然，您必须添加检查，以不在任何类型的提交上运行代码，而不仅仅是禁用按钮（可以通过开发工具轻松地重新启用），这就是我添加的原因$已禁用if语句的scope.isd

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

另外，这里有一个正在运行的演示

您的代码中没有任何必填字段，也没有表单。您尝试最小化代码量是件好事，但我们还需要更多。如果没有什么要验证的，就无法进行任何验证。您希望按钮上的ng模型做什么？

$scope.disableClick = function(valid) {
  if(valid && !$scope.isDisabled) {
    $scope.isDisabled = true;
  }
  return false;
}