代码之家 › 专栏 › 技术社区 › Cpt Kitkat Anu

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

angular7 typescript angular

2

Cpt Kitkat Anu · 技术社区 · 6 年前

我有 <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个选项。但是,目前还没有验证。您可以选择每一行作为键、时间、段。

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

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

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

1 回复 | 直到 6 年前

1

Joniras 6 年前

我将选项设置为“禁用”(无论何时选中),并在更改时再次启用:

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

有关详细代码,请参阅演示。

我相信您可以从以下方面构建解决方案:

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

Full Demo