PrimeNG Datatable validation

Question

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

Antikhippe Antikhippe · Accepted Answer · 2018-05-24T08:30:10

You can check user input once the user clicks on the Save button. Something like :

save(row) {
    if (row.comment === "") {
      alert('Please enter a comment');
    } else {
      row.isEditable = false
    }
  }

See StackBlitz forked from the one you joined.

__

Edit

1) You can add a span like that just next to your input :

<input type="text" [(ngModel)]="row.name">
<span *ngIf="isEmpty(row.name)" class="error">Enter a name</span>

And relevant TS code :

  isEmpty(input) {
    return input.replace(/\s/g, '') === "";
  }

2) Check the whole row user inputs to enable or disable the Save button :

  disableSaveButton(row) {
    if (row.name === '' || row.city === '') {
      return true;
    }
    return false;
  }

And relevant HTML :

<button (click)="save(row)" [disabled]="disableSaveButton(row)">Save</button>

See StackBlitz

PrimeNG Datatable validation

1 Answers