Question

我目前有一个包含许多不同输入的表格。在下面的示例中，为简单起见，我创建了带有两个输入的表单。我正在尝试这样做，以便在表单无效时（即，所有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>

从上面的代码段中可以看到，myForm.$invalid是false，尽管我还没有填写所需的输入。是否有一些其他属性可以告诉我是否已填写所有必需的输入？

我看过诸如this one之类的不同帖子，但是当我尝试使用myForm.$valid时，它只是给我myForm.$invalid的否定版本，也无济于事。 / p>

Answer 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>

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

1 个答案: