Estoy creando una aplicación usando Angular 4.0.2. ¿Cómo puedo agregar un botón a un formulario para agregar una nueva fila de entrada y un botón de eliminación para eliminar una fila en particular? Quiero decir que quiero una forma algo como esto. Quiero que mi formulario se vea así:

.

Aquí está mi código:

añadir-factura.componente.html

 <h3 class="page-header">Add Invoice</h3> <form [formGroup]="invoiceForm"> <div formArrayName="itemRows"> <div *ngFor="let itemrow of itemRows.controls; let i=index" [formGroupName]="i"> <h4>Invoice Row #{{ i + 1 }}</h4> <div class="form-group"> <label>Item Name</label> <input formControlName="itemname" class="form-control"> </div> <div class="form-group"> <label>Quantity</label> <input formControlName="itemqty" class="form-control"> </div> <div class="form-group"> <label>Unit Cost</label> <input formControlName="itemrate" class="form-control"> </div> <div class="form-group"> <label>Tax</label> <input formControlName="itemtax" class="form-control"> </div> <div class="form-group"> <label>Amount</label> <input formControlName="amount" class="form-control"> </div> <button *ngIf="i > 1" (click)="deleteRow(i)" class="btn btn-danger">Delete Button</button> </div> </div> <button type="button" (click)="addNewRow()" class="btn btn-primary">Add new Row</button> </form> <p>{{invoiceForm.value | json}}</p>

Aquí está mi código para add-invoice.component.ts

 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(){ } }