Angular 4 Form FormArray Add a Button to add or delete a form input row

Question

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

Answer 1

Here's a shortened version of your code:

When you init your form, you can add one empty formgroup inside your formArray:

ngOnInit() {
  this.invoiceForm = this._fb.group({
    itemRows: this._fb.array([this.initItemRows()])
  });
}

get formArr() {
  return this.invoiceForm.get('itemRows') as FormArray;
}

Then the function:

initItemRows() {
  return this._fb.group({
    // list all your form controls here, which belongs to your form array
    itemname: ['']
  });
}

Here is the addNewRow and deleteRow functions:

addNewRow() {
  this.formArr.push(this.initItemRows());
}

deleteRow(index: number) {
  this.formArr.removeAt(index);
}

Your form should look like this:

  

    

      
Invoice Row #{{ i + 1 }}
      

        Item Name
        
      
      
        Delete
      
    
  
  Add new Row

Here's a

DEMO