Angular2形式的ControlGroup持有未定义数量的Control

本文介绍了Angular2形式的ControlGroup持有未定义数量的Control的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

如何使用Angular2管理拥有未定义数量字段的表单?

How to manage with Angular2 a form who hold an undefined number of field ?

就我而言，我需要创建一个用户可以从中添加和删除某些文件块的目录.这就像一个通讯录，用户可以在其中添加一个或十个地址.每个地址都有一些字段，例如街道，街道编号等.

In my case, I need to create a from where user can add and delete some block of fileds. It's like an address book where user can add one or ten address. And each address had a some fields like street, street number and so on.

我的样子是这样

let address = fb.group({ street: fb.control(null, Validators.required), streetNumber fb.control(null, Validators.required) }); this.userForm = fb.group({ name: fb.control(null, Validators.required), firstName: fb.control(null, Validators.required), address: fb.group({ 1: address }) });

我真的不知道如何在模板中进行管理.

I really don't know how to manage this in the template.

我已经尝试在模板中编写类似的内容，但是显然，这是行不通的...

I've try to write some thing like that in the template, but obviously, it doesn't work...

<form [ngFormModel]="userForm"> <input type="text" ngControl="name" #name="ngForm"/> <input type="text" ngControl="firstName" #firstName="ngForm"/> <div *ngFor="#address of userForm.controls['address'].controls"> <input type="text" ngControl="street" #street="ngForm"/> <input type="text" ngControl="streetNumber" #streetNumber="ngForm"/> </div>

编辑

我已经做出了更好的解释 plnkr.co/edit/ffYe1479WnxYOQrbxwLF?p =预览

I've made a Plunker for a better explanation plnkr.co/edit/ffYe1479WnxYOQrbxwLF?p=preview

推荐答案

我为您实现了它，请参见柱塞或更好，柱塞-@ waldo

I implemented it for you, see Plunker or better yet, Plunker -@waldo

import {Component} from 'angular2/core'; import { FORM_DIRECTIVES, FormBuilder, ControlGroup, ControlArray, Validators, NgForm, Control, AbstractControl } from 'angular2/common'; @Component({ selector: 'my-app', template: ` <form [ngFormModel]="userForm" *ngIf="userForm"> <p><label><input id="date" type="text" ngControl="name" #name="ngForm"/> Name</label></p> <p><label><input id="date" type="text" ngControl="firstName" #firstName="ngForm"/> FirstName</label></p> <h3>Add address</h3> <ul ngControlGroup="addresses"> <li *ngFor="#ctrl of objToArray(userForm.find('addresses').controls); #i = index" ngControlGroup="{{ctrl}}"> {{ctrl}}: <input ngControl="street" placeholder="Street"> <input ngControl="streetNumber" placeholder="StreetNumber"> </li> </ul> <div (click)="addAddress()" style="cursor: pointer"> Add Another Address</div> </form> `, directives: [FORM_DIRECTIVES] }) export class AppComponent { userForm: ControlGroup; constructor(private fb: FormBuilder) { this.userForm = fb.group({ name: fb.control(null, Validators.required), firstName: fb.control(null, Validators.required), addresses: fb.group({ address1: fb.group({ street: fb.control(null, Validators.required), streetNumber: fb.control(null, Validators.required) }) }) }); console.log(this.userForm); } objToArray(o){ return Object.keys(o); } addAddress() { let addressField = this.fb.group({ street: this.fb.control(null, Validators.required), streetNumber: this.fb.control(null, Validators.required) }); (<ControlGroup>this.userForm.find('addresses')).addControl( 'address' + (Object.keys((<ControlGroup>this.userForm.find('addresses')).controls).length + 1), addressField); } }