ngrepeat数组

Angular provides us a lot of tools to deal with forms. Just the fundamental way it binds data for us to a lot of the tools it provides like validation, Angular helps make lives easier.

Angular为我们提供了许多处理表单的工具。 Angular只是将数据绑定到我们所提供的许多工具（如验证）的基本方式，它使生活变得更轻松。

In the past, we have gone over how to using Angular. This was a simple process and just required adding a few directives here and there.

过去，我们介绍了如何使用Angular 。 这是一个简单的过程，只需要在此处和此处添加一些指令即可。

动态构建表格 (Dynamically Building Forms)

Now let's talk about a different scenario where we won't always know how many fields or which fields we will have. There could be many scenarios for needing a dynamically built form. Let's say that our application pulls data from that API for a form that we need to edit.

现在让我们谈谈另一种情况，在这种情况下，我们将不总是知道多少个字段或将拥有哪些字段。 可能有许多情况需要动态构建的表单。 假设我们的应用程序从该API中提取了需要编辑的表单中的数据。

For this example, we are going to get a list of users and we need to edit their email. The process for this would look something like:

对于此示例，我们将获取用户列表，我们需要编辑他们的电子邮件。 这个过程看起来像这样：

• Get an array of users from an API call
  通过API调用获取一系列用户
• Display this list to our administrator
  向我们的管理员显示此列表
• Provide fields to edit the information of our users
  提供字段以编辑我们的用户信息
• Validate those fields using Angular
  使用Angular验证这些字段

To keep things simple, instead of pulling a list of users from an API, we will be creating the array right in the JavaScript file. Easy cheese. Here is our list of users and we'll be editing their email addresses.

为简单起见，我们将直接在JavaScript文件中创建数组，而不是从API中提取用户列表。 简单的奶酪。 这是我们的用户列表，我们将编辑他们的电子邮件地址。

Here is the example JSON data we would get back from our API for our users.

这是我们将从API中为用户返回的示例JSON数据。

// sample data we would get back from an api  var users = [      {         name: 'Chris',        email: ''      },      {        name: 'Holly',        email: ''      }  ];    // assign this data to an object to store all our form data  $scope.formData = {};  $scope.formData.users = users;

We will create a form using these fields and we will use ng-repeat to loop over each user and display their email field. Here is the code for that:

我们将使用这些字段创建一个表单，并使用ng-repeat遍历每个用户并显示其电子邮件字段。 这是该代码：

    
    
  
     
    
      {
   { user.name }}'s Email    
          
      
Valid Email Address Required
  
     
    

We loop over each of these fields but there is a problem when building our form this way. Validation won't work because of how we named the name attribute statically.

我们遍历了每个字段，但是以这种方式构建表单时存在问题。 由于我们是如何静态命名name属性的，因此验证将无法进行。

没有ngForm的验证 (Validation Without ngForm)

By default, Angular currently does not allow us to dynamically create the name attribute of an input field. From our last , we can see that validating a field using Angular requires the name attribute.

默认情况下，Angular当前不允许我们动态创建输入字段的name属性。 从最后的 ，我们可以看到使用Angular验证字段需要name属性。

The Problem: Name attributes are not dynamically generated and we are not able to validate fields individually. Since name isn't dynamically generated, then all the fields will validate together as one. To check if an input is valid, you would use {

{ userForm.email.$valid }}.

问题 ：名称属性不是动态生成的，因此我们无法单独验证字段。 由于名称不是动态生成的，因此所有字段将一起验证为一个。 要检查输入是否有效，可以使用{

{ userForm.email.$valid }} 。

See the Pen by Chris Sevilleja () on .

见笔由克里斯Sevilleja（ 上） 。

Typing into the form above, you can see that the fields are only valid when both become valid email addresses.

输入上面的表格，您可以看到仅当两个字段都变为有效的电子邮件地址时，这些字段才有效。

使用ngForm进行验证 (Validation Using ngForm)

So how would we validate each field individually, the way a user would expect our form to validate? Since Angular uses the method of formName.fieldName.$valid to validate, we will need to have each input be part of its own form.

那么，我们如何分别验证每个字段，用户希望我们的表单进行验证的方式呢？ 由于Angular使用formName.fieldName.$valid进行验证，因此我们将需要使每个输入成为其自己的表单的一部分。

The Solution: ngForm allows us to create forms within our main form that will allow us to validate fields individually. Let's modify the code from earlier to accommodate ng-form and see how that changes things.

解决方案 ：ngForm允许我们在主表单内创建表单，这将使我们可以分别验证字段。 让我们从较早的时候修改代码以适应ng-form ，看看它如何改变事物。

    
  
     
  
          
       {
   { user.name }}'s Email    
           
       
Valid Email Address Required
  
        
     
    

Just by adding the ng-form directive, now each field will believe it is part of a form within our main form. In this case, userFieldForm. Now we are able to validate each field individually by using userFieldForm.email.$invalid.

只需添加ng-form指令，现在每个字段都将认为它是我们主窗体中窗体的一部分。 在这种情况下，为userFieldForm 。 现在，我们可以使用userFieldForm.email.$invalid分别验证每个字段。

See the Pen by Chris Sevilleja () on .

见笔由克里斯Sevilleja（ 上） 。

Now we are able to validate each field individually!

现在，我们可以分别验证每个字段了！

结论 (Conclusion)

Hopefully this has helped show how the ngForm directive is to be used when building dynamic forms from ngRepeat.

希望这有助于说明从ngRepeat构建动态表单时如何使用ngForm指令。

The official aren't very elaborate so this should be a good starting point for anyone with the need for a form like this.

正式的不是很详尽，因此对于任何需要这种形式的人来说，这应该是一个很好的起点。

Go ahead and experiment further and go even crazier by nesting ngRepeats! As always, let us know if you have any questions or comments.

继续进行进一步的实验，并通过嵌套ngRepeats甚至更疯狂！ 与往常一样，如果您有任何疑问或意见，请告诉我们。

翻译自:

ngrepeat数组