使用 AngularJS 禁用表单无效时的提交按钮

我的姿势是这样的:

<form name="myForm">
<input name="myText" type="text" ng-model="mytext" required />
<button disabled="{{ myForm.$invalid }}">Save</button>
</form>

正如您可能看到的，如果输入为空，按钮将被禁用，但是当它包含文本时不会恢复为启用。我该怎么做？

248580 次浏览
小开
最佳答案

您需要使用表单的名称，以及禁用 ng 的: 这是 Plunker 的演示

<form name="myForm">
<input name="myText" type="text" ng-model="mytext" required />
<button ng-disabled="myForm.$invalid">Save</button>
</form>
小开

来补充这个答案。我刚刚发现，如果在表单名称中使用连字符(角1.3) ，它也会崩溃:

这样 没有就可以工作了:

<form name="my-form">
<input name="myText" type="text" ng-model="mytext" required />
<button ng-disabled="my-form.$invalid">Save</button>
</form>
小开

选择的响应是正确的，但是像我这样的人，可能有异步验证的问题，发送请求到服务器端的按钮在给定的请求处理过程中不会被禁用，所以按钮会闪烁，这对用户来说看起来很奇怪。

要使其无效，您只需处理表单的 $挂起状态:

<form name="myForm">
<input name="myText" type="text" ng-model="mytext" required />
<button ng-disabled="myForm.$invalid || myForm.$pending">Save</button>
</form>
小开

我们可以创建一个简单的指令并禁用该按钮，直到填满所有必填字段。

angular.module('sampleapp').directive('disableBtn',
function() {
return {
restrict : 'A',
link : function(scope, element, attrs) {
var $el = $(element);
var submitBtn = $el.find('button[type="submit"]');
var _name = attrs.name;
scope.$watch(_name + '.$valid', function(val) {
if (val) {
submitBtn.removeAttr('disabled');
} else {
submitBtn.attr('disabled', 'disabled');
}
});
}
};
}
);

更多信息请点击这里

小开 

<form name="myForm">
<input name="myText" type="text" ng-model="mytext" required/>
<button ng-disabled="myForm.$pristine|| myForm.$invalid">Save</button>
</form>

如果你想更严格一点

小开

如果您正在使用 Reactive Forms，则可以使用以下内容:

<button [disabled]="!contactForm.valid" type="submit" class="btn btn-lg btn primary" (click)="printSomething()">Submit</button>

提交答案