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

时间:2016-04-20 14:14:42

标签: javascript angularjs angular-meteor

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

这是我的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动态添加电子邮件输入的电子邮件输入无效时,如何禁用提交按钮?

谢谢!

2 个答案:

答案 0 :(得分:1)

来自forms的angularjs文档:

  

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

     

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

     

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

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

  1. 向表单添加name属性,这将是获取表单数据的变量的名称。因此name = "myform"将表单存储在$scope.myform
  2. ng-model添加到您的所有输入中,如果输入没有ng-model,则表示不会在表单的验证中考虑。
  3. 之后,您始终可以使用$scope.myform.$valid查看表单是否有效。作为额外的好处,您还可以为每个输入添加name属性,这也将为$scope.myform内的每个输入添加一个对象,其中包含该输入的所有信息及其验证。

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

答案 1 :(得分:0)

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