当输入字段位于 ng 重复中时，ng 禁用不起作用

ng-disabled not working when input fields are in an ng-repeat

本文关键字：ng 不起作用 字段 输入      更新时间：2023-09-26

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

这是我的网页

<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 动态添加的，如何禁用提交按钮？

谢谢！

来自 Angularjs 文档的表单：

表单是 FormController 的实例。表单实例可以 （可选）使用 Name 属性发布到作用域中。

同样，具有 ngModel 指令的输入控件包含 NgModelController的实例。这样的控件实例可以是 使用 name 属性作为表单实例的属性发布 在输入控件上。name 属性指定 窗体实例上的属性。

这意味着窗体和控件的内部状态 可用于使用标准绑定在视图中进行绑定 原。

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

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

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

编辑：这是一个 plunkr 和一个你想做的事情的例子：http://plnkr.co/edit/86p9PrNnFVdfB7y406a6?p=preview

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

相关文章：