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>

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

这是我的控制人员：

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

来自forms的angularjs文档：

表单是FormController的一个实例。表单实例可以   可选地使用name属性发布到范围中。

类似地，具有ngModel指令的输入控件包含   NgModelController的实例。这样的控件实例可以   使用name属性作为表单实例的属性发布   在输入控件上。 name属性指定的名称   表单实例上的属性。

这意味着表单和控件的内部状态   可以使用标准绑定在视图中进行绑定   原语。

这意味着，如果您将name属性添加到表单中，那么您可以访问表单及其范围内的所有属性，这意味着您可以获得访问权限验证表格所需的所有信息，包括它是否有效，质朴或肮脏等。为了实现这一目标，您需要做两件事：

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

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

编辑：下面是一个有关你想做的事情的例子： http://plnkr.co/edit/86p9PrNnFVdfB7y406a6?p=preview

Answer 2

要禁用提交按钮，请设置$ scope.invalid = true;在你的控制器和你的html ng-disabled =“无效”。根据您检查电子邮件输入是否无效的方式，请相应地设置$ scope.invalid。

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

2 个答案: