NG-禁用时输入字段处于NG重复不工作 [英] ng-disabled not working when input fields are in an ng-repeat

问题描述

我想如果让从数组输入字段无效我提交按钮被禁用。

I'm trying to make my submit button disabled if the input fields from an array are invalid.

下面是我的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>

你可以看到，我有一个按钮来动态地添加多个电子邮件输入。

as you can see, I have a button to add more email inputs dynamically.

下面是我的控制器：

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-重复？

How can I make the submit button disabled if there is an email input that's invalid where email inputs are added dynamically with an ng-repeat?

谢谢！

推荐答案

从形式angularjs文档：

一个形式的FormController的一个实例。该表格​​实例可以
  选择性地发布到使用的name属性的范围。

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

类似地，具有ngModel指令输入控制モ
  NgModelController的实例。这种控制的实例可
  出版使用的name属性的表单实例的属性
  在输入控制。 name属性指定的名称
  属性的表单实例。

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.

这意味着，如果您添加名称属性表单，那么你可以访问的形式和它的范围内的全部特性，这意味着你'重新获准进入你需要验证您的形式，包括它是否有效或无效的，原始的或脏等。为了这个工作的所有信息，你需要2个主要的事情：

What this means is that if you add the name attribute to your form then you get access to the form and all it's properties in your scope, this means that you're given access to all the information you need for validating your form including if it's valid or not, pristine or dirty etc. In order for this to work you need 2 main things:

1. name属性添加到您的形式，这将是变量的名称来获得表单数据。因此， NAME =MyForm的存储在 $ scope.myform 的形式。


2. 添加 NG-模型所有的输入，如果输入不具有NG-模式，那么它不会在窗体的验证加以考虑。

1. Add name attribute to your form, this will be the name of the variable to get the form data. So name = "myform" stores the form in $scope.myform.
2. Add ng-model to all your inputs, if an input doesn't have an ng-model then it won't be considered in the form's validation.

之后，你可以随时了解您的形式使用有效 $ scope.myform。$有效。作为额外的奖励，你也可以添加名称属性为每个输入，这也将增加一个对象里面的 $ scope.myform <每个输入/ code>包含该输入的所有信息和它的验证。

After that you can always find out if your form is valid using $scope.myform.$valid. As an added bonus you could also add the name property to each input, this will also add an object for each input inside the $scope.myform containing all the information for that input and it's validation.

编辑：继承人与你想要做什么的例子plunkr：
http://plnkr.co/edit/86p9PrNnFVdfB7y406a6?p=$p$pview

Heres a plunkr with an example of what you want to do: http://plnkr.co/edit/86p9PrNnFVdfB7y406a6?p=preview

这篇关于NG-禁用时输入字段处于NG重复不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！