当表单对AngularJS无效时禁用提交按钮
当表单对AngularJS无效时禁用提交按钮
提问于 2013-03-09 01:41:28
我的表单如下：
<form name="myForm">
<input name="myText" type="text" ng-model="mytext" required />
<button disabled="{{ myForm.$invalid }}">Save</button>
</form>正如您可能看到的，如果输入为空，该按钮将被禁用，但当它包含文本时，它不会更改回启用状态。我怎么才能让它工作呢？
回答 5
Stack Overflow用户
回答已采纳
发布于 2013-03-09 01:43:06
您需要使用表单的名称以及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>Stack Overflow用户
发布于 2015-05-24 01:09:27
选择的响应是正确的，但像我这样的人可能会在发送请求到服务器端时遇到异步验证问题-在给定的请求处理期间，按钮将不会被禁用，因此按钮将闪烁，这对用户来说非常奇怪。
要避免这种情况，您只需处理表单的$pending状态：
<form name="myForm">
<input name="myText" type="text" ng-model="mytext" required />
<button ng-disabled="myForm.$invalid || myForm.$pending">Save</button>
</form>Stack Overflow用户
发布于 2017-09-01 20:31:16
如果您使用的是反应式表单，则可以使用以下内容：
<button [disabled]="!contactForm.valid" type="submit" class="btn btn-lg btn primary" (click)="printSomething()">Submit</button>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15300067
复制相关文章
相似问题