PrimeNG table 验证

Question

我关注 PrimeNG Table这是 StackBlitz 演示。

https://stackblitz.com/edit/datatablevalidation

只有一列 "Value" 是 editable。

在 "Value" 列中，我想添加一些基于 "Type" 列的验证。我正在动态呈现列值类型

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

我最大的挑战是在第一次加载时验证 table，因为列类型是现有产品的新列功能，并且数据已经存在于 table 中，我需要显示所有验证启动 table 时出错。

从我的示例中，您可以看到第一行的类型为 email has an invalid value，所有行都相同

Answer 1

您可以像这样向用户显示某些值不正确：

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

然后在您的 .ts 文件中：

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

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

PrimeNG table 验证

PrimeNG table validation

primeng

angular

primeng-datatable