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
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