当AngularJS表单无效时禁用提交button
我有这样的表格：
<form name="myForm"> <input name="myText" type="text" ng-model="mytext" required /> <button disabled="{{ myForm.$invalid }}">Save</button> </form> 如您所见，如果input为空，则该button将被禁用，但当它包含文本时，该button不会变回启用状态。 我怎样才能使它工作？
你需要使用你的表单的名字，以及ng-disabled： 这是一个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>
select的响应是正确的，但像我这样的人可能会有与asynchronousvalidation发送请求到服务器端的问题 – button将不会禁用在给定的请求处理，所以button将闪烁，这对用户来说看起来很奇怪。
要做到这一点，你只需要处理$ pending状态：
<form name="myForm"> <input name="myText" type="text" ng-model="mytext" required /> <button ng-disabled="myForm.$invalid || myForm.$pending">Save</button> </form>
我们可以创build一个简单的指令，并禁用button，直到所有的必填字段被填充。
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'); } }); } }; } );
欲了解更多信息请点击这里
如果你正在使用Reactive Forms，你可以使用这个：
<button [disabled]="!contactForm.valid" type="submit" class="btn btn-lg btn primary" (click)="printSomething()">Submit</button>
<form name="myForm"> <input name="myText" type="text" ng-model="mytext" required/> <button ng-disabled="myForm.$pristine|| myForm.$invalid">Save</button> </form>
