Angular2 form ControlGroup who hold an undefined number of Control

Question

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

EDIT

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

The template I've wrote don't do the job, because it's not the right way to write it. Angular raise error because he don't find the control 'street' in the control group 'userForm'. — Waldo
Doesn't look like you need #street="ngForm". What if you remove it? — Günter Zöchbauer
#street="ngForm" is useful for me because I use it in an component to show some errors to the user. I think the issue come from ngControl="street", because 'street' isn't defined in 'userForm' control, but in the sub control group 'address' — Waldo

Ankit Singh Ankit Singh · Accepted Answer · 2016-04-15T08:26:00

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

Angular2 form ControlGroup who hold an undefined number of Control

1 Answers