Question

我有<mat-select>和ngFor，其中显示了表中的行列表。我需要对列类型进行验证，以使我只能选择1个键，然后用户就不能在类型下拉列表中选择键。

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

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

我想验证一下，只有一行可以是key类型：

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

此打字稿代码为您提供了在“类型”列的mat-下拉列表中选择选项的选项。我应该只能选择一行作为键。

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

有关详细代码，请参见演示。

我确定您可以从中构建解决方案：

如何将验证放入动态显示列

1 个答案:

Full Demo