I am using PrimeNG DataTable with Angular and trying to implement something similar to this StackBlitz.
How to add a required field validator on the row that I am trying to edit ? Basically when they edit the comment I need to make sure they entered a text.
HTML
<p-table #dt [value]="iToDoList" dataKey="ID" [paginator]="true" [rowsPerPageOptions]="[10,50,100]" [rows]="10">
<ng-template pTemplate="header">
<tr>
<th>ID</th>
<th>Comment</th>
<th>Action</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-row>
<tr>
<td>{{row.ID}}</td>
<td>
<div *ngIf="!row.isEditable">{{row.Comment}}</div>
<div *ngIf="row.isEditable">
<input type="text" [(ngModel)]="row.comment">
</div>
</td>
<td><button (click)="editRow(row)">Edit</button></td>
<td>
<button (click)="save(row)">Save</button>
</td>
</tr>
</ng-template>
</p-table>
component.ts
iToDoList: IToDoList[] = null;
ngOnInit(): void {
this.GetToDoList(this.userID);
}
GetToDoList(ID: string) {
this._dashboardService.getToDoList(ID)
.subscribe(
data => {
this.iToDoList = data.result;
data.map(row => {
row.isEditable = false;
});
},
error => console.log('GetControls Method: ' + <any>error, 'alert alert-danger'));
}
editRow(row) {
console.log("row " + row.ID)
this.iToDoList.filter(row => row.isEditable).map(r => { r.isEditable = false; return r })
row.isEditable = true;
}