如何在垫子选择中进行验证

Question

我有多行mat-select。我希望能够以这样一种方式进行验证，即每个至少可以选择1个值。如果我没有从垫子选择中选择每种类型的1个值，那么我将无法继续下一步。

<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)]="type.text" (selectionChange)="changed($event)">
<mat-option *ngFor="let type of typeColumn  let i = index" [value]="{type: type.text, index: i}" [disabled]="!type.allowed && type.allowed != undefined">
{{ type.text }} 
</mat-option>
</mat-select>
</mat-cell>
</ng-container>

这个html代码允许我显示mat select并显示dropwdown值的列表。

typeColumn = [
{text:'None'},
{text:'Time',allowed: true},
{text:'Segment'},
{text:'Key',allowed: true},
{text:'Input'},
{text:'Quantile' } ];

这是我得到的下拉选项列表。

我需要一个验证，即用户在进行下一步之前，应该至少选择每个时间、键、段、输入和键的一个值。

Answer 1

由于您没有发布完整的代码，例如stackblitz，因此提供帮助有点困难。尤其是看起来您正在使用mat-table，并且可能希望持久化对数据源的更改。

我在这里抛出了一个快速堆栈litz，它只显示6个mat-select元素，并在selectionChange()上检查是否选择了所有用属性required标记的类型。这反映在变量isValid中，基于此，您可以让用户前进到下一步或不前进。

这应该会让您大致了解如何进行验证。为了得到更精确的答案，你需要发布更多的代码和数据，最好是一个工作堆栈。