title: Dynamically adding Components to a FormArray that is in a Form (Angular 2/4)
body: <p>I have a registration form where an user could add one/more Address(es), one/more phone(s) to a new or existing Organization, Address and Phone are actually (reusable) components.</p>
  
  <p>For example, Phone component is similar with that one from Android contact details, it has 3 FormControls: a Type (drop-down list), number (input) and a remove button.</p>
  
  <p>At the end, the entire form must be submitted to save the information.</p>
  
  <p>Question: how can I dynamically add Phones to the form and display already existing ones? (code &amp; markup below). I'd much appreciate your time and effort answering me!</p>
  
  <p>organization-detail.component.ts</p>
  
  <pre><code>import { Component, Input } from '@angular/core';
  import { FormBuilder, FormGroup, FormArray, FormControl, Validators } from '@angular/forms';
  
  import { Organization } from './organization';
  import { PhoneDetailComponent } from "../phone-detail/phone-detail.component";
  
  @Component({
      selector: 'organization-detail',
      templateUrl: './organization-detail.component.html',
      styleUrls: ['./organization-detail.component.css']
  })
  
  export class OrganizationDetailComponent {
      organizationForm: FormGroup;
  
      constructor (private fb: FormBuilder){
        this.createForm();
      }
  
      createForm() {
          this.organizationForm = this.fb.group({
          accountingId: [''],
          externalId: '',
          isHost: false,
          logoPath: '',
          name: ['', 
              [Validators.required,
              Validators.minLength(4),
              Validators.maxLength(24)]
              ], // &lt;--- the FormControl called "name"
          notes: '',
          registrationNo: '',
          vATId: '',
          webSite: '',
          phones: new FormArray([])
          //phones: new Array&lt;PhoneDetailComponent&gt;
          });
      }
  
      onSubmit() {
        console.log(this.organizationForm);  
      }
  
      onAddPhone() {
        const control = new PhoneDetailComponent();
        (&lt;FormArray&gt;this.organizationForm.get('phones')).push(control);
      }
  
  }
  </code></pre>
  
  <p>organization-detail.component.html</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2"&gt;
        &lt;h2&gt;Organization Detail&lt;/h2&gt;
        &lt;form [formGroup]="organizationForm" (ngSubmit)="onSubmit()" class="form-horizontal"&gt;
          &lt;div class="form-group"&gt;
            &lt;label for="isHost"&gt; Is host:&lt;/label&gt;
            &lt;input type="checkbox" id="isHost" formControlName="isHost" class="check" /&gt;
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
            &lt;label for="name"&gt;Name:&lt;/label&gt;
            &lt;input type="text" id="name" class="form-control" formControlName="name" placeholder="Organization name" /&gt;
            &lt;span 
              *ngIf="!organizationForm.get('name').valid &amp;&amp; organizationForm.get('name').touched" 
              class="help-block"&gt;Please enter a valid name!&lt;/span&gt;
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
            &lt;label for="accountingId"&gt;Accounting Id:&lt;/label&gt;
            &lt;input type="text" id="accountingId" class="form-control" formControlName="accountingId" /&gt;
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
            &lt;label for="externalId"&gt;External Id:&lt;/label&gt;
            &lt;input type="text" id="externalId" class="form-control" formControlName="externalId" /&gt;
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
            &lt;label for="registrationNo"&gt;Registration No:&lt;/label&gt;
            &lt;input type="text" id="registrationNo" class="form-control" formControlName="registrationNo" /&gt;
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
            &lt;label for="vATId"&gt;VAT Id:&lt;/label&gt;
            &lt;input type="text" id="vATId" class="form-control" formControlName="vATId" /&gt;
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
            &lt;label for="webSite"&gt;Web site:&lt;/label&gt;
            &lt;input type="text" id="webSite" class="form-control" formControlName="webSite" /&gt;
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
            &lt;label for="logoPath"&gt;Logo path:&lt;/label&gt;
            &lt;input type="text" id="logoPath" class="form-control" formControlName="logoPath" /&gt;
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
            &lt;label for="notes"&gt;Notes:&lt;/label&gt;
            &lt;textarea id="notes" class="form-control" formControlName="notes" rows="3"&gt;&lt;/textarea&gt;
          &lt;/div&gt;
          &lt;div formArrayName="phones"&gt;
            &lt;h4&gt;Phones:&lt;/h4&gt;
            &lt;button class="btn btn-default" type="button"
              (click)="onAddPhone()"&gt;
              Add phone
            &lt;/button&gt;
            &lt;div class="form-group"
              *ngFor="let phoneControl of organizationForm.get('phones').controls; let i = index"&gt;
              &lt;!--&lt;input type="text" class="form-control" [formControlName]="i"&gt;--&gt;
              &lt;phone-detail&gt;&lt;/phone-detail&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
            &lt;div class="input-group"&gt;
              &lt;input type="text" class="form-control"&gt;
              &lt;span class="input-group-btn"&gt;
                    &lt;button class="btn btn-default" type="button"&gt;Go!&lt;/button&gt;
              &lt;/span&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;button class="btn btn-primary" type="submit"&gt;Submit&lt;/button&gt;
        &lt;/form&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;p&gt;Form value: {{ organizationForm.value | json }}&lt;/p&gt;
  &lt;p&gt;Form status: {{ organizationForm.status | json }}&lt;/p&gt;
  </code></pre>
  
  <p>phone-detail.component.ts</p>
  
  <pre><code>import { Component, OnInit, Input } from '@angular/core';
  
  import { Phone } from "./phone";
  
  @Component({
    selector: 'phone-detail',
    templateUrl: './phone-detail.component.html',
    styleUrls: ['./phone-detail.component.css']
  })
  export class PhoneDetailComponent implements OnInit {
    @Input('phoneItem') item: Phone;
  
    constructor() { }
  
    ngOnInit() {
    }
  }
  </code></pre>
  
  <p>phone-detail.component.html</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-xs-3"&gt;
        &lt;select class="form-control"&gt;
          &lt;option&gt;1&lt;/option&gt;
          &lt;option&gt;2&lt;/option&gt;
          &lt;option&gt;3&lt;/option&gt;
          &lt;option&gt;4&lt;/option&gt;
          &lt;option&gt;5&lt;/option&gt;
        &lt;/select&gt; 
      &lt;/div&gt;
      &lt;div class="col-xs-7"&gt;
        &lt;input type="text" class="form-control"&gt;
      &lt;/div&gt;
      &lt;div class="col-xs-2"&gt;
        &lt;button class="btn"&gt;X&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>