如何在 mat-select 中进行验证

Question

我有多个带有 mat-select 的行。我希望能够以这样一种方式进行验证，即我应该能够每个选择至少 1 个值。如果我不从 mat- 中选择每种类型的 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 并显示下拉值列表。

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

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

在继续下一步之前，我需要验证用户应至少选择每个 Time、Key、Segment、Input 和 Key 的一个值。

Answer 1

由于您没有发布完整的代码，因此有点难以提供帮助，例如堆叠闪电战。尤其是看起来您正在使用 mat-table 并且可能希望将更改持久保存到数据源。

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

这应该让您大致了解如何进行验证。要获得更准确的答案，您需要发布更多代码和数据，最好是一个有效的堆栈闪电战。