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

Posted 2023-02-22

【中文标题】当表单使用 AngularJS 无效时禁用提交按钮

【英文标题】：Disable submit button when form invalid with AngularJS

【发布时间】：2013-02-24 08:32:30

【问题描述】：

我的表格是这样的：

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

如您所见，如果输入为空，则该按钮被禁用，但当它包含文本时，它不会变回启用状态。我怎样才能让它发挥作用？

【参考方案1】：

您需要使用表单的名称，以及 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>

【讨论】：

对不起，我现在用它。然而，即使文本框包含文本，它仍然被禁用

+1 巧合的是，我正在阅读您的这篇很棒的帖子：benlesh.com/2012/11/angular-js-form-validation.html

如果我没有表格怎么办？我也可以在 div 元素上这样做吗？

@MichaelCwienczek 从技术上讲，您可以将 ng-form 添加到 div 标签：<div ng-form="myForm"> ... stuff here .. </div>。虽然，如果您从输入提交值，在按钮按下时，我强烈建议使用 <form/> 标签，如果没有其他原因，它允许用户点击 [ENTER] 并提交表格。但由于可访问性问题等原因，它也可能构成更好的做法。

@BenLesh，如果提交按钮不在我的表单中，如果表单无效，我仍然必须禁用它。

【参考方案2】：

添加到这个答案。我刚刚发现，如果您在表单名称中使用连字符（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>

【讨论】：

是的，对于任何 AngularJS 表单验证，表单名称都应该是驼峰式的。

根据经验，所有类似js的表达式都会识别camelcase形式的对象，而dash是用于html的语法

那么，如果表单是表单集的成员，因此需要有一个带有连字符的名称（例如“my_formset_name-0”），会发生什么？

在上面的例子中，我相信myForm.$invalid 应该仍然可以工作，所以在你的情况下，我认为my_formset_name0.$invalid 应该可以工作。

【参考方案3】：

选择的响应是正确的，但是像我这样的人，在向服务器端发送请求时可能会遇到异步验证问题 - 在给定的请求处理期间按钮不会被禁用，因此按钮会闪烁，这对用户来说看起来很奇怪.

要取消这个，你只需要处理表单的 $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

【参考方案4】：

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

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');
    
   );
  
 ;

);

For More Info click here

【讨论】：

您的解决方法对我来说只需稍加调整即可。谢谢

当 Angular 1.x 中的原生指令 ng-disabled 和 Angular 2|4.x 中的 [disabled] 经过比这更好的测试时，为什么要这样做？其次，为什么要有一个限定在表单范围内的指令来禁用嵌套按钮，它是非常具体的。一个考虑不周的解决方案 IMO。

以上是一个示例指令，原来有很多场景，如嵌套复选框等，我不想通过添加每个表单来弄乱我的 html 代码，而是这个指令会处理所有事情。跨度>

【参考方案5】：

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

如果你想更严格一点

【参考方案6】：

如果你使用的是响应式表单，你可以使用这个：

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

【讨论】：

虽然这对“Angular”是有效的建议，但这个答案对“AngularJS”是无效的。也就是说，(click) 和 [disabled] 不是有效的 AngularJS 代码，Reactive Forms 也不是 AngularJS 框架的一部分。 “Angular 是今天和明天的 Angular 的名称。AngularJS 是 Angular 所有 v1.x 版本的名称” angular.io/guide/ajs-quick-reference