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 · Accepted Answer · 2018-05-25 19:44:46Z

5

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

edited May 25, 2018 at 19:44

answered May 24, 2018 at 8:30

Antikhippe

6,7132 gold badges31 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

rgoal Over a year ago

yes, I am aware of this solution , but I am looking for something that is better specially when you have multiple columns. Imagine having 5 input columns in the datatable , I would like it to be instant .Based on the blunker you have modified , it will great when user erase their input a message will be places next to the field saying required and "save"button will be disabled till they type something

Antikhippe Over a year ago

Ok, please check my Edit and tell me if it's ok now.

rgoal Over a year ago

great idea, but how would I disable the save button? lets say both are empty city and name from the blunker..how would I ensure that save button is disabled...currently the span will work but it won't prevent user from clicking on save

Antikhippe Over a year ago

I completed my Edit

rgoal Over a year ago

the issue is if a user type a space in the input box , the validation goes a away..

Collectives™ on Stack Overflow

PrimeNG Datatable validation

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related