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

Answer 1

好像您有documentation所显示的语法略有不同。看一下示例中的password。有Validators.compose([Validators.required, Validators.minLength(6)]))，所以也许您也应该有Validators.compose([Validators.required, Validators.minLength(11), Validators.maxLength(11), Validators.pattern(chargecodepatterns)]])。

此外，您正在使用不推荐使用的Table。我们现在应该使用TurboTable（因此您需要在项目中更新PrimeNG）。也许验证本身很好，这只是表的问题。（而且我认为@foxgang就是这个意思）

Answer 2

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

如何对可编辑的主数据表实施反应形式方法

2 个答案: