如何对可编辑的primeng数据表实现反应式表单方法

Question

在这里我添加了一些可编辑的素数数据表，但我无法使用纠正形式验证字段。

<p-dataTable [value]="fspChargeCodeList" selectionMode="single" [loading]="loading">
<p-column styleClass="col-button">
<ng-template let-fspChargeCode="rowData" pTemplate="body">
<span  *ngIf="!fspChargeCode.isEditable">
<a class="attachments-mwa" (click)="editRow(fspChargeCode)">
<i class="fas fa-pencil-square-o"></i>
</a>
</span>
<span *ngIf="fspChargeCode.isEditable">
<a class="attachments-mwa" (click)="editChargeCode(fspChargeCode)">
<i class="fas fa-check"></i>
</a>
</span>
<a class="delete-mwa" (click)="delete(fspChargeCode)">
<i class="far fa-trash-alt"></i>
</a>
</ng-template>
</p-column>
<p-column styleClass="text-md-center text-center" field=chargeCode header="{{columns['chargeCode']}}">
<ng-template let-row="rowData" pTemplate="body">
<div *ngIf="!row.isEditable">{{row.chargeCode}}</div>
<div *ngIf="row.isEditable">
<input type="text" [(ngModel)]="row.chargeCode" formControlName="'chargeCode'">
</div>
</ng-template>
</p-column>
</p-dataTable>
ts
editRow(fspChargeCode: any) {
this.fspChargeCodeList.filter(fspChargeCode => fspChargeCode.isEditable)
.map(r => { r.isEditable = false; return r })
fspChargeCode.isEditable = true;
}
validateChargeCodeForm() {
var chargecodepatterns = "^[a-zA-Z]{6}[0-9]{5}$";
this.chargeCodeAddForm = this.fb.group({
chargeCode: ['', [Validators.required, Validators.minLength(11),
Validators.maxLength(11), Validators.pattern(chargecodepatterns)]],
})
}

任何人都可以有方法，请发布或评论答案

提前致谢

G.苏米亚

Answer 1

看起来您的语法与文档显示的语法略有不同。看看示例中的password。有Validators.compose([Validators.required, Validators.minLength(6)]))，所以也许你也应该有Validators.compose([Validators.required, Validators.minLength(11), Validators.maxLength(11), Validators.pattern(chargecodepatterns)]])。

此外，您正在使用已弃用的表。我们现在应该使用 TurboTable(所以你需要在项目中更新 PrimeNG(。也许验证本身很好，这只是表的问题。(我认为@foxgang的意思是(

Answer 2

不再维护数据表。你可以试试涡轮增压表吗？