PrimeNG table validation

Question

I've following PrimeNG Table Here is the StackBlitz demo.

https://stackblitz.com/edit/datatablevalidation

Only one column "Value" is editable.

In "Value" column, I want to add some validation based on the column "Type". I am rendering column value type dynamically

<input pInputText [(ngModel)]="rowData[col.field]" type={{rowData.propValueType.toLowerCase()}} class="form-control" />  

My biggest challenge is validating the table on the first load because column Type is a new column feature of the existed product and data already existed in the table, i need to show all validation errors when a table is initiated.

From my sample, you can see that the first row is has type email has an invalid value , same for row all rows

Answer 1

You can show to user that some value is incorrect like this:

<ng-template pTemplate="output">
    <p>{{rowData[col.field]}}  </p>
    <p *ngIf="rowData.propValueType.toLowerCase() =='email' 
              && !isCorrectEmail(rowData[col.field])" 
        style="color:red">
          incorrect email
     </p>
</ng-template>

and then in your .ts file:

isCorrectEmail(emailAddress: any) {
    let re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(String(emailAddress).toLowerCase());        
}

For other types you can write other validation methods.