如果表单无效，则禁用提交按钮答案

【问题标题】：Disabled submit button if form is invalid angularjs如果表单无效，则禁用提交按钮
【发布时间】：2020-04-18 08:52:05
【问题描述】：

我目前有一个包含许多不同输入的表单。在下面的示例中，为简单起见，我创建了一个带有两个输入的表单。我正在尝试这样做，以便在表单无效时禁用我的提交按钮 - 也就是说，当所有 required 输入尚未填写时。

这是我迄今为止尝试过的：

angular.module('myApp', []);
angular.element(document).ready(function () {
  angular.bootstrap(document, ['myApp']);  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>

<form name="myForm">
  <input type="text" placeholder="name" required/>
  <input type="number" placeholder="age" required />
  <input type="submit" ng-disabled="myForm.$invalid" />
  {{ myForm.$invalid }} <!-- prints "false" -->
</form>

从上面的 sn-p 可以看出，myForm.$invalid 是 false，尽管我还没有填写所需的输入。是否有一些不同的属性会告诉我所需的输入是否已全部填写？

我查看过不同的帖子，例如 this one，但是当我尝试使用 myForm.$valid 时，它只会给我 myForm.$invalid 的否定版本，这也没有多大帮助。

【问题讨论】：

添加一个禁用 css 属性的类。添加并调用在控制器中定义的方法，从每个输入框中更改并验证表单，如果所有输入字段都有效，则动态删除类或添加类。

标签： javascript angularjs forms

【解决方案1】：

您在表单字段中缺少ng-model。您需要添加ng-model，因为它会检测到表单字段的变化。

试试这个：

angular.module('myApp', []);
angular.element(document).ready(function () {
  angular.bootstrap(document, ['myApp']);  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>

<form name="myForm">
  <input type="text" ng-model="name" placeholder="name" required/>
  <input type="number" ng-model="age" placeholder="age" required />
  <input type="submit" ng-disabled="myForm.$invalid" />
  {{ myForm.$invalid }} <!-- prints "false" -->
</form>

【讨论】：