title: Angular 4 Form FormArray Add a Button to add or delete a form input row
body: <p>I am building an app using Angular 4.0.2. How can I add a button to a form to add a new row of input and a delete button for a particular row to delete? I mean that I want a form something like this. I want my form to look something like this:</p>
  
  <p><img src="https://i.stack.imgur.com/OHh2f.jpg" alt="Form Image">.</p>
  
  <p>Here is my code:</p>
  
  <p>add-invoice.component.html</p>
  
  <pre><code>    &lt;h3 class="page-header"&gt;Add Invoice&lt;/h3&gt;
      &lt;form [formGroup]="invoiceForm"&gt;
        &lt;div formArrayName="itemRows"&gt;
          &lt;div *ngFor="let itemrow of itemRows.controls; let i=index" [formGroupName]="i"&gt;
            &lt;h4&gt;Invoice Row #{{ i + 1 }}&lt;/h4&gt;
            &lt;div class="form-group"&gt;
              &lt;label&gt;Item Name&lt;/label&gt;
              &lt;input formControlName="itemname" class="form-control"&gt;
            &lt;/div&gt;
            &lt;div class="form-group"&gt;
              &lt;label&gt;Quantity&lt;/label&gt;
              &lt;input formControlName="itemqty" class="form-control"&gt;
            &lt;/div&gt;
            &lt;div class="form-group"&gt;
               &lt;label&gt;Unit Cost&lt;/label&gt;
               &lt;input formControlName="itemrate" class="form-control"&gt;
            &lt;/div&gt;
            &lt;div class="form-group"&gt;
              &lt;label&gt;Tax&lt;/label&gt;
              &lt;input formControlName="itemtax" class="form-control"&gt;
            &lt;/div&gt;
            &lt;div class="form-group"&gt;
              &lt;label&gt;Amount&lt;/label&gt;
              &lt;input formControlName="amount" class="form-control"&gt;
            &lt;/div&gt;
            &lt;button *ngIf="i &gt; 1" (click)="deleteRow(i)" class="btn btn-danger"&gt;Delete Button&lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;button type="button" (click)="addNewRow()" class="btn btn-primary"&gt;Add new Row&lt;/button&gt;
      &lt;/form&gt;
      &lt;p&gt;{{invoiceForm.value | json}}&lt;/p&gt;
  </code></pre>
  
  <p>Here is my code for add-invoice.component.ts</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { FormBuilder, FormControl, FormArray, FormGroup } from '@angular/forms';
  
  @Component({
    selector: 'app-add-invoice',
    templateUrl: './add-invoice.component.html',
    styleUrls: ['./add-invoice.component.css']
  })
  
  export class AddInvoiceComponent implements OnInit {
    invoiceForm: FormGroup;
  
    constructor(
      private _fb: FormBuilder
    ) {
      this.createForm();
    }
  
    createForm(){
      this.invoiceForm = this._fb.group({
        itemRows: this._fb.array([])
      });
      this.invoiceForm.setControl('itemRows', this._fb.array([]));
    }
  
    get itemRows(): FormArray {
      return this.invoiceForm.get('itemRows') as FormArray;
    }
  
    addNewRow(){
      this.itemRows.push(this._fb.group(itemrow));
    }
  
    ngOnInit(){
  
    }
  }
  </code></pre>