angular ng-zorro 可编辑表格结合响应式表单，增加，删除，编辑一行

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>&nbsp;&nbsp;
    <button nz-button (click)="submitData()" nzType="primary">提交</button>&nbsp;&nbsp;
    <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>&nbsp;&nbsp;
                            <a (click)="startEdit(data.value)">edit</a>&nbsp;&nbsp;
                        </td>