javascript - 当输入字段位于 ng-repeat 中时，ng-disabled 不起作用

Question

如果数组中的输入字段无效，我会尝试禁用提交按钮。

这是我的 html

<form name="membersForm">
  <div ng-repeat="emailInput in emailInputs">
    <div class="input-field col s10">
      <input id="email{{$index}}" type="email" class="validate email" length="50" maxlength="50" ng-model="email['email_' + $index]" required>
      <label for="email{{$index}}">{{emailInput.label}}</label>
    </div>
    <div class="input-field col s2">
      <div class="btn btn-floating waves-effect waves-light red" ng-click="removeEmail($index)">
        <i class="material-icons">clear</i>
      </div>
    </div>
  </div>
  <div class="col s12">
    <a class="btn-floating btn waves-effect waves-light" id="addEmail" ng-click="addEmail()">
      <i class="material-icons">add</i>
    </a>
  </div>
  <a class="waves-effect waves-light btn" type="submit" ng-disabled="membersForm.$invalid">
    Continue
  </a>
</form>

如您所见，我有一个按钮可以动态添加更多电子邮件输入。

这是我的 Controller :

class teamMembersCtrl {
  constructor($scope) {
    'ngInject';

    $scope.emailInputs = [
      {
        label: 'Email'
      }
    ];

    $scope.email = {};

    $scope.setCurrentPrice();

    $scope.addEmail = function () {
      $scope.emailInputs.push({
        label: 'Email'
      });
    }

    $scope.removeEmail = function ($index) {
      $scope.emailInputs.splice($index,1);
    }
  }
}

问题

如果电子邮件输入无效且使用 ng-repeat 动态添加电子邮件输入，如何禁用提交按钮？

谢谢!

Answer 1

来自 angularjs 文档 forms :

A form is an instance of FormController. The form instance can optionally be published into the scope using the name attribute.

Similarly, an input control that has the ngModel directive holds an instance of NgModelController. Such a control instance can be published as a property of the form instance using the name attribute on the input control. The name attribute specifies the name of the property on the form instance.

This implies that the internal state of both the form and the control is available for binding in the view using the standard binding primitives.

这意味着，如果您将 name 属性添加到表单中，那么您就可以访问表单及其范围内的所有属性，这意味着您可以访问所有验证表单所需的信息，包括表单是否有效、原始或脏污等。为了使其正常工作，您需要两个主要内容:

1. 将 name 属性添加到您的表单中，这将是获取表单数据的变量的名称。因此 name = "myform" 将表单存储在 $scope.myform 中。
2. 将 ng-model 添加到您的所有输入中，如果输入没有 ng-model，则表单验证中不会考虑它。

之后，您可以随时使用 $scope.myform.$valid 查明您的表单是否有效。作为额外的好处，您还可以将 name 属性添加到每个输入，这还将为 $scope.myform 内的每个输入添加一个对象，其中包含该输入的所有信息输入及其验证。

编辑:这是一个 plunkr，其中包含您想要执行的操作的示例: http://plnkr.co/edit/86p9PrNnFVdfB7y406a6?p=preview