PrimeNG表验证 [英] PrimeNG table validation

问题描述

我正在关注PrimeNG表，这是StackBlitz演示.

从我的示例中，您可以看到第一行的类型为email的值无效，所有行均相同

解决方案

您可以向用户显示某些值不正确，如下所示:

 < ng-template pTemplate ="output">< p> {{rowData [col.field]}}</p>< p * ngIf ="rowData.propValueType.toLowerCase()=='电子邮件'&&！isCorrectEmail(rowData [col.field])style ="color:red">不正确的电子邮件</p></ng-template> 

，然后在您的 .ts 文件中:

  isCorrectEmail(emailAddress:any){让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，}))$/;返回re.test(String(emailAddress).toLowerCase());} 

对于其他类型，您可以编写其他验证方法.

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

解决方案

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.

这篇关于PrimeNG表验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！