javascript - Angular Mat-Table: how to make each row as separated form?

Question

I'm working on my custom grid component that use Mat-table. In my grid I have a adding row that is a records in data sourse and has inputs in cells, in the last column there is a button to add a new record. To achive this I was using a <form> tag that was wrapping the <table>, example:

<form [formGroup]="formGroup">
 <table mat-table [dataSource]="dataSource">
  <ng-container *ngFor="let column of columns">
   <ng-container cdkColumnDef="{{column.id}}">
    <th cdk-header-cell *cdkHeaderCellDef mat-sort-header>{{column.label}}</th>
    <td cdk-cell class="position-relative" *cdkCellDef="let row">
     <ng-select
                  [items]="column.field?.Attributes.List.PickListItems"
                  bindLabel="Label"
                  bindValue="Label"
                  appendTo="body"
                  dropdownPosition="bottom"
                  [formControlName]="column.label">
      </ng-select>
      <app-validation-messages class="grid-validation-messages" [formGroup]="formGroup"
                                       controlName="{{column.label}}"></app-validation-messages>
    </td>
   </ng-container>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
 </table>
</form>

Ok, so that's the basic implementation of my mat-table but it doesn't matter - the only important thing here is where the form tag is put. It was working fine but now I have to add inline edition, so if the user clicks on a table row then that row goes to edit mode and I want to create the form only for that row. It has to be a separate thing because it doesn't work together with a row that is for adding (that row is hidden when some of the records are in edit mode but the formgroup still exists).

So that how it looks when the record edition is off:

And this is how the edition looks:

So at the moment, there are two fields with the same control name (because adding row is just hidden). To avoid this I'm mapping each data record in onInit before I set this as MatTableDataSource and I'm creating a fromGroup for each so in the table I could use row.FormGroup but I don't know where I should put the <form> tag to wrap the row.

Can someone help me with this?

Answer 1

等待大神答复