Angular2 form ControlGroup, у которых есть неопределенное количество элементов управления

Question

Как управлять с Angular2 формой, у которой есть неопределенное количество полей?

В моем случае мне нужно создать, где пользователь может добавить и удалить какой-либо блок. Это похоже на адресную книгу, где пользователь может добавить один или десять адресов. И каждый адрес имел некоторые поля, такие как улица, номер улицы и так далее.

Мой выглядеть следующим образом:

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 
      }) 
     }); 

Я действительно не знаю, как справиться с этим в шаблоне.

Я стараюсь писать некоторые вещи, как, что в шаблоне, но, очевидно, она не работает ...

<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> 

РЕДАКТИРОВАНИЕ

Я сделал Plunker для лучшего объяснения http://plnkr.co/edit/ffYe1479WnxYOQrbxwLF?p=preview

Answer 1

Я реализовал его для вас, см. Plunker или еще лучше, 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); 
    } 
}