forms - change - page title angular 4

Angular 4 FormArray de formularios Agregue un botón para agregar o eliminar una fila de entrada de formulario

Question

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 para eliminar una fila en particular? Quiero decir que quiero una forma como esta. Quiero que mi forma se vea más o menos así:

.

Aquí está mi código:

add-invoice.component.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(){
}
}

Answer 1

Aquí hay una versión abreviada de su código:

Cuando inicia su formulario, puede agregar un grupo de formularios vacío dentro de su matriz de formularios:

ngOnInit() {
this.invoiceForm = this._fb.group({
itemRows: this._fb.array([this.initItemRows()])
});
}
get formArr() {
return this.invoiceForm.get(''itemRows'') as FormArray;
}

Entonces la función:

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

Aquí están las funciones addNewRow y deleteRow :

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

Su formulario debería verse así:

<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>

Aquí está un

DEMO