当表单使用 AngularJS 无效时禁用提交按钮
我有这样的表格：
<form name="myForm">
<input name="myText" type="text" ng-model="mytext" required />
<button disabled="{{ myForm.$invalid }}">Save</button>
</form>
如您所见，如果输入为空，则该按钮被禁用，但当它包含文本时它不会变回启用。我怎样才能让它工作？
您需要使用表单的名称，以及 ng-disabled: Here's a demo on Plunker
<form name="myForm">
<input name="myText" type="text" ng-model="mytext" required />
<button ng-disabled="myForm.$invalid">Save</button>
</form>
添加到这个答案。我刚刚发现，如果您在表单名称中使用连字符（Angular 1.3），它也会崩溃：
所以这不起作用：
<form name="my-form">
<input name="myText" type="text" ng-model="mytext" required />
<button ng-disabled="my-form.$invalid">Save</button>
</form>
myForm.$invalid 应该仍然有效，所以在您的情况下，我认为 my_formset_name0.$invalid 应该有效。
选择的响应是正确的，但是像我这样的人可能会在向服务器端发送请求时遇到异步验证问题 - 在给定的请求处理期间按钮不会被禁用，因此按钮会闪烁，这对用户来说看起来很奇怪。
要取消这一点，您只需要处理表单的 $pending 状态：
<form name="myForm">
<input name="myText" type="text" ng-model="mytext" required />
<button ng-disabled="myForm.$invalid || myForm.$pending">Save</button>
</form>
!myForm.$valid。 itnext.io/valid-and-invalid-in-angular-forms-61cfa3f2a0cd
如果您使用的是反应式表单，则可以使用：
<button [disabled]="!contactForm.valid" type="submit" class="btn btn-lg btn primary" (click)="printSomething()">Submit</button>
(click) 和 [disabled] 不是有效的 AngularJS 代码，Reactive Forms 也不是 AngularJS 框架的一部分。 “Angular 是今天和明天的 Angular 的名称。AngularJS 是 Angular 的所有 v1.x 版本的名称” angular.io/guide/ajs-quick-reference
我们可以创建一个简单的指令并禁用按钮，直到填写所有必填字段。
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');
}
});
}
};
}
);
ng-disabled 和 angular 2|4.x 中的 [disabled] 经过比这更好的测试时，为什么要这样做？其次，为什么有一个范围为表单的指令来禁用嵌套按钮，它是超级具体的。一个考虑不周的解决方案 IMO。
如果你想更严格一点
<div ng-form="myForm"> ... stuff here .. </div>。虽然，如果您从输入提交一个值，在按钮按下时，我强烈建议使用<form/>标签，如果没有其他原因，它允许用户点击 [ENTER] 并提交表格。但由于可访问性问题等原因，它也可能构成更好的实践。