动态创建和删除表中的行。
问题:
用于创建动态表的HTML代码。
<form class="form-horizontal" [formGroup]="loanProductForm" (ngSubmit)="onSubmit()">
<table>
<thead>
<tr>
<th>BP</th>
<th>PULSE</th>
<th>TEMP.</th>
<th>Wt.</th>
<th>Ht.</th>
<th></th>
</tr>
</thead>
<tbody>
<tr [formGroupName]="i" formArrayName="vilats" *ngFor="let product of loanProductForm.get('vitals').controls; let i = index ; let last = last">
<td>
<input class="form-control form-control-sm" type="text" id="newAttributeBp"
formControlName="BP" />
</td>
<td>
<input class="form-control form-control-sm" type="text" id="newAttributePulse"
formControlName="PULSE" />
</td>
<td>
<input class="form-control form-control-sm" type="text" id="newAttributeTemp"
formControlName="Temp"/>
</td>
<td>
<input class="form-control form-control-sm" type="text" id="newAttributeWeight"
formControlName="Wt"/>
</td>
<td>
<input class="form-control form-control-sm" type="text" id="newAttributeHeight"
name="newAttributeHeight" formControlName="Ht"/>
</td>
<td>
<button *ngIf="last" class="btn btn-sm btn-default" type="button" (click)="addProductButtonClick()"
title="Add New"><i class="fas fa-plus"></i></button>
<button (click)="removeCompany(i)" *ngIf="!last" class="btn btn-sm btn-default"
title="Delete"><i class="fas fa-trash-alt"></i></button>
</td>
</tr>
</tbody>
</table>
<input type="submit" value="Save"/>
</form>
用于初始化,添加和删除条目的组件代码。
loanProductForm: FormGroup;
ngOnInit() {
this.loanProductForm = this._formBuilder.group({
vitals: this._formBuilder.array([this.addProductFormGroup()])
});
}
addProductFormGroup(): FormGroup {
return this._formBuilder.group({
entryDate: ["", Validators.required],
BP: ["", Validators.required],
PULSE: ["", Validators.required],
Temp: ["", Validators.required],
Wt: ["", Validators.required],
Ht: ["", Validators.required]
});
}
addProductButtonClick(): void {
(<FormArray>this.loanProductForm.get("vitals")).push(
this.addProductFormGroup()
);
}
在此处stackblitz
复制了该问题答案 0 :(得分:0)
解决了这个问题,更改了迭代代码。
<tbody formArrayName="vitals">
<tr [formGroupName]="i" *ngFor="let product of eRegForm.get('vitals').controls; let i = index ; let last = last">
<td>
<p-calendar type="number" class="form-control form-control-sm" dateFormat="dd-mm-yy" container="body"
monthNavigator="true" yearRange="1930:2030" yearNavigator="true" showButtonBar="true"
formControlName="entryDate">
</p-calendar>
</td>
<td>
<input class="form-control form-control-sm" type="text" formControlName="BP" />
</td>
<td>
<input class="form-control form-control-sm" type="text" formControlName="PULSE" />
</td>
<td>
<input class="form-control form-control-sm" type="text" formControlName="Temp"/>
</td>
<td>
<input class="form-control form-control-sm" type="text" formControlName="Wt"/>
</td>
<td>
<input class="form-control form-control-sm" type="text" formControlName="Ht"/>
</td>
<td>
<button *ngIf="last" class="btn btn-sm btn-default" type="button" (click)="addProductButtonClick()"
title="Add New"><i class="fas fa-plus"></i></button>
<button (click)="removeCompany(i)" *ngIf="!last" class="btn btn-sm btn-default"
title="Delete"><i class="fas fa-trash-alt"></i></button>
</td>
<!--
<td>
<input type="text" class="form-control" [id]="'price' + i" placeholder="price" formControlName="price">
<div *ngIf="product.get('price').errors?.required &&
product.get('price').touched">
price is required
</div>
</tr>
</tbody>
工作代码stackblitz