Bundling FormControls with a FormArray

You will most likely find that FormGroups are more than capable of serving your needs for the purpose of combining many FormControl objects into one container. However, there is one very common pattern that makes its sister type, the FormArray, extremely useful: variable length cloned inputs.

Note

The code, links, and a live example related to this recipe are available at http://ngcookbook.herokuapp.com/2816/.

Getting ready

Suppose you had the following skeleton application:

[app/article-editor.component.ts] 
 
import {Component} from '@angular/core'; 
import {FormControl, Validators}  
  from '@angular/forms'; 
 
@Component({ 
  selector: 'article-editor', 
  template: ` 
    <p>Tags:</p> 
    <ul> 
      <li *ngFor="let t of tagControls; let i = index"> 
        <input [formControl]="t"> 
      </li> 
    </ul> 
    <p><button ...