DataTable Edit Can not validate with two-dimension

Question

I face an issue about Datatable Editor

My table is data table of PrimeNG, this table can edit any cell of the row and all cell is required:

here is the requirement of Datatable:

can edit any cell validate any cell (required) when I finished 2 requirements, the input raise up a bug when the input is blank

Error: If ngModel is used within a form tag, either the name attribute must be set or the form
  control must be defined as 'standalone' in ngModelOptions.

  Example 1: <input [(ngModel)]="person.firstName" name="first">

i think the problem is the name is blank and duplicate when input have same value.

now I want to set the attribute name of each of input like this

[name]="`{col.field}` + '_' + `value of first row` + '_' + data[col.field]"

this will make the input is unique, how i can do that or some one suggest me an other solution

and here is Plunker https://plnkr.co/edit/n0S4JK1siLvDHypTSpkZ?p=preview

Answer 1

i think the problem is the name is blank and duplicate when input have same value.

Indeed, you are right. The error you have means that you must have a name property and this one should never be empty. But when you remove your cell value, data[col.field] becomes empty and so the name property.

So to solve your problem, you should not depend on this value. What you can do therefore is to assign the concatenation of the index of the row and the index of the column. Something like rowIndex_columnIndex :

<form (ngSubmit)="onSubmit()" #form="ngForm">
<p-dataTable [value]="data" [editable]="true">
  <p-column *ngFor="let col of cols,let j=index" [field]="col.field" [editable]="true" [header]="col.header">
    <ng-template let-col let-data="rowData" pTemplate="editor" let-i="rowIndex">
      <input [(ngModel)]="data[col.field]" pInputText required="true" [name]="i+'_'+j"/>
    </ng-template>
  </p-column>
</p-dataTable> 

where i is the index of the row and j the index of the column.

See working Plunker