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

我的表格是这样的：

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

拯救

---

如您所见，如果输入为空，则该按钮将被禁用，但当它包含文本时，该按钮不会变回启用状态。如何使其工作？

您需要使用表单的名称，以及禁用ng：

拯救

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

拯救

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

要使其无效，只需处理表单的$pending状态：

拯救

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

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

拯救

如果您使用的是反应式表单，您可以使用：

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

提交

对不起，我现在用。然而，即使文本框包含文本+1，它仍然被禁用。巧合的是，我刚刚读了你的这篇文章：如果我没有表单怎么办？我可以在div元素上也这样做吗？@MichaelCwienczek从技术上讲，您可以将ng表单添加到div标记：

。。。这里的东西。尽管如此，如果您是从输入中提交值，在按下按钮时，我强烈建议使用
标记，如果没有其他原因，只允许用户点击[ENTER]并提交表单。但这也可能是更好的做法，因为需要考虑可访问性等问题。@BenLesh，如果提交按钮不在我的表单中，并且如果表单无效，我仍必须禁用它，该怎么办？是的，对于任何AngularJS表单验证，表单名称都应该是驼峰大小写。根据经验，所有类似js的表达式都会识别camelcase表单中的对象，而dash则表示类似html的syntaxSo，如果表单是表单集的成员，因此需要在表单中包含一个带连字符的名称（如“my_formset_name-0”）？在上面的示例中，我相信
myForm.$invalid
仍然有效，因此在您的情况下，我认为
my_formset\u name0.$invalid
应该可以使用。非常感谢您提供的异步验证解决方案！你应该只使用
！myForm.$valid
也处理异步挂起问题。你的解决方法对我来说很管用，只需稍加调整。谢谢，当angular 1.x中有本机指令
ng disabled
和angular 2 | 4.x中的
[disabled]
测试结果比这好得多时，为什么要这样做？。其次，为什么要有一个作用域为表单的指令来禁用嵌套按钮，它是超特定的。在我看来，这是一个考虑不周的解决方案。上面是一个示例指令，原始指令有很多场景，如嵌套复选框等，我不想通过在每个表单中添加来弄乱我的html代码，相反，这个指令会处理所有事情。虽然这是对“AngularJS”的有效建议，但这个答案对“AngularJS”无效。也就是说，
（单击）
和
[禁用]
都不是有效的AngularJS代码，也不是AngularJS框架的一部分。“AngularJS是今天和明天Angular的名称。AngularJS是Angular的所有v1.x版本的名称”