如何在动态显示列中进行验证

Question

我有 <mat-select> 和 ngFor，它显示 table 中的行列表。我需要在列类型中进行验证，我应该只能 select 1 个键，然后用户不应该 select 键入下拉列表中的键。

// Code for html(Angular 7)
<!-- Column for Type-->
<ng-container matColumnDef="type">Type
<mat-header-cell *matHeaderCellDef mat-sort-header>Type</mat-header-cell>
<mat-cell *matCellDef="let element">
  <mat-select placeholder="Select Type" [(ngModel)]="element.type" (selectionChange)="checkTypeValidation(element,element.type)">
    <mat-option *ngFor="let type of typeColumn" [value]="type">
      {{ type }} 
      <div *ngIf = "element.type === "></div>
    </mat-option>
  </mat-select>
</mat-cell>
</ng-container>

这是显示行类型的代码。这是一个有 6 个选项的 mat-select。但是，目前还没有验证。您可以选择每一行作为键、时间、段。

我想验证只有一行可以是键类型：

// Code for Typescript
  typeColumn = [
    'None',
    'Time',
    'Segment',
    'Key',
    'Input',
    'Quantile'
  ];

此打字稿代码让您可以在 mat-dropdown 中为类型列选择选项。我应该可以 select 只有一行作为键。

Answer 1

我将该选项设置为在每次选择时禁用，并在更改时再次启用它：

<mat-select placeholder="Type" (selectionChange)="changed($event)">

  changed(event){
    if(event.value.type == 'Key'){
       //when there was a value previously, allow it again
       if(this.previous[event.source.id] != undefined){
         this.typeColumn[this.previous[event.source.id]].allowed = true;
       }
       this.previous[event.source.id] = event.value.index;
       //disable the selected option
       this.typeColumn[event.value.index].allowed = false;
    }
  }

详细代码见Demo

我相信您可以从中构建解决方案：

如何在动态显示列中进行验证

How to Put validation in dynamic display column

typescript

angular

angular7

Full Demo