我有这样我的表格：
<form name="myForm">
<input name="myText" type="text" ng-model="mytext" required />
<button disabled="{{ myForm.$invalid }}">Save</button>
</form>
正如你可能会看到，如果输入是空的按钮被禁用，但是当它包含文本它不会变回启用。 我怎样才能使它发挥作用？
Answer 1:
您需要使用您的窗体的名称，以及NG-禁用： 这里有Plunker演示
<form name="myForm">
<input name="myText" type="text" ng-model="mytext" required />
<button ng-disabled="myForm.$invalid">Save</button>
</form>
Answer 2:
要添加到这个答案。 我刚刚发现，它也将打破，如果你在你的窗体名称使用连字符（角1.3）：
所以这是行不通的：
<form name="my-form">
<input name="myText" type="text" ng-model="mytext" required />
<button ng-disabled="my-form.$invalid">Save</button>
</form>
Answer 3:
选定的反应是正确的，但像我这样，可能有异步验证问题与发送请求到服务器端 - 按钮将给出请求处理过程中没有禁止，所以按钮会闪烁，看起来对用户非常奇怪。
要失去此，你只需要处理$未决形式的状态：
<form name="myForm">
<input name="myText" type="text" ng-model="mytext" required />
<button ng-disabled="myForm.$invalid || myForm.$pending">Save</button>
</form>
Answer 4:
如果使用的是无形式，你可以这样做：
<button [disabled]="!contactForm.valid" type="submit" class="btn btn-lg btn primary" (click)="printSomething()">Submit</button>
Answer 5:
我们可以创建一个简单的指令，并禁用按钮，直到所有的必填字段被填充。
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');
}
});
}
};
}
);
欲了解更多信息请点击这里
Answer 6:
<form name="myForm"> <input name="myText" type="text" ng-model="mytext" required/> <button ng-disabled="myForm.$pristine|| myForm.$invalid">Save</button> </form> 如果你想更严格一点
文章来源: Disable submit button when form invalid with AngularJS
