Angular2 form ControlGroup who hold an undefined number of Control

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.

My look like this :

let address ={
        street: fb.control(null, Validators.required),
        streetNumber fb.control(null, Validators.required)

this.userForm ={
        name: fb.control(null, Validators.required),
        firstName: fb.control(null, Validators.required),
            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"/>


I’ve made a Plunker for a better explanation

Leave a Reply

1 Comment threads
0 Thread replies
Most reacted comment
Hottest comment thread
1 Comment authors
Jason Recent comment authors
newest oldest most voted
Notify of

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 ={ name: fb.control(null, Validators.required), firstName: fb.control(null,… Read more »