angular - 如何对可编辑 primeng 数据表实现响应式(Reactive)表单方法

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

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

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