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

by

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:

<form [formGroup]="invoiceForm">
  <div formArrayName="itemRows">
    <div *ngFor="let itemrow of formArr.controls; let i=index"  [formGroupName]="i">
      <h4>Invoice Row #{{ i + 1 }}</h4>
      <div>
        <label>Item Name</label>
        <input formControlName="itemname">
      </div>
      <button type="button" (click)="deleteRow(i)" *ngIf="formArr.controls.length > 1" >
        Delete
      </button>
    </div>
  </div>
  <button type="button" (click)="addNewRow()">Add new Row</button>
</form>

Here’s a

DEMO

More Related Contents:

  1. Angular 2: Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’
  2. Angular2 – Radio Button Binding
  3. Angular 2: Get Values of Multiple Checked Checkboxes
  4. Manually Set Value for FormBuilder Control
  5. Angular 2 – large scale application forms’ handling
  6. Angular: composite ControlValueAccessor to implement nested form
  7. How to make ‘submit’ button disabled?
  8. How to use array of objects for controls in Reactive Forms
  9. What causes the “control.registerOnChange is not a function” error
  10. TypeScript-‘s Angular Framework Error – “There is no directive with exportAs set to ngForm”
  11. Is it a good practice to use an empty URL for a HTML form’s action attribute? (action=””)
  12. Is action really required on forms?
  13. Multiple forms in a single page using flask and WTForms
  14. Min / Max Validator in Angular 2 Final
  15. angular2 manually firing click event on particular element
  16. Nodejs POST request multipart/form-data
  17. Better Honeypot Implementation (Form Anti-Spam)
  18. How do you style the HTML5 form validation messages?
  19. Clear JSF form input values after submitting
  20. What are the practical differences between template-driven and reactive forms?
  21. Angular2 – Validate and submit form from outside
  22. In Angular, how to add Validator to FormControl after control is created?
  23. HTML5: Slider with two inputs possible?
  24. How can I conditionally require form inputs with AngularJS?
  25. The pipe ‘ ‘ could not be found angular2 custom pipe
  26. Disable submit button when form invalid with AngularJS
  27. Firefox keeps form data on reload
  28. How to reset form validation on submission of the form in ANGULAR 2
  29. Dynamic row height in a SwiftUI form
  30. Angular 2 Reactive Forms trigger validation on submit

Leave a Comment