angular和ng-zorro 可编辑表格,响应式表单,增加,删除,编辑一行,并附有校验功能
table-edit-row.component.html
<form nz-form [formGroup]="validateForm">
<button nz-button nzType="dashed" class="add-button" (click)="addRow()">
<i nz-icon nzType="plus"></i>
Add field
</button>
<button nz-button (click)="submitData()" nzType="primary">提交</button>
<br />
<br />
<nz-table [nzShowPagination]="false" nzSize="middle" #editRowTable nzBordered [nzData]="listOfData">
<thead>
<tr>
<th>Name</th>
<th>Mobile</th>
<th>Address</th>
<th nzWidth="200px">Action</th>
</tr>
</thead>
<tbody>
<ng-container formArrayName="aliases">
<tr [formGroupName]="i" *ngFor="let data of aliases.controls;let i=index" class="editable-row">
<ng-container *ngIf="editId != data.value.id; else editTemplate">
<td>
{
{data.value.name}}
</td>
<td>
{
{data.value.mobile}}
</td>
<td>
{
{data.value.address}}
</td>
<td>
<a (click)="deleteRow(i)">delete</a>
<a (click)="startEdit(data.value)">edit</a>
</td>