Angular2 Form ControlGroup, die eine undefinierte Anzahl von Control

Question

Wie verwalten mit Angular2 ein Formular, die eine undefinierte Anzahl von Feld halten?

In meinem Fall muss ich einen erstellen, von dem Benutzer einen Block von Dateien hinzufügen und löschen kann. Es ist wie ein Adressbuch, in dem der Benutzer eine oder zehn Adressen hinzufügen kann. Und jede Adresse hatte einige Felder wie Straße, Hausnummer und so weiter.

Mein Aussehen wie folgt aus:

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

Ich weiß nicht wirklich, wie dies in der Vorlage zu verwalten.

Ich habe versuchen, einige Sache wie das in der Vorlage zu schreiben, aber natürlich ist es nicht funktioniert ...

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

EDIT

Ich habe machte einen Plunker für eine bessere Erklärung http://plnkr.co/edit/ffYe1479WnxYOQrbxwLF?p=preview

Answer 1

Ich implementierte es für Sie, siehe Plunker oder besser noch, 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); 
    } 
}