Как поставить валидацию в mat-select

Question

У меня есть несколько строк с mat-select. Я хочу иметь возможность поставить проверку таким образом, чтобы я мог выбрать минимум 1 значение в каждой. Если я не выбираю 1 значение каждого типа из mat-выберите, затем я не смогу перейти к следующему шагу.

<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-код позволяет мне отображать выбор мат и отображает список значений раскрывающегося списка.

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

Этосписок выпадающих опций, которые я получаю.

Мне нужна проверка, чтобы пользователь выбрал хотя бы одно значение из каждого Времени, Ключа, Сегмента, Ввода и Ключа, прежде чем перейти к следующему шагу.

Answer 1

Немного сложно помочь, поскольку вы не публикуете полный код, например, стекаблиц.Тем более, что, похоже, вы используете mat-table и, вероятно, хотите сохранить изменения в источнике данных.

Я набросал быстрый стек, здесь , который просто отображает 6 mat-select элементови проверяет selectionChange(), выбраны ли все типы, отмеченные свойством required.Это отражено в переменной isValid, и на основании этого вы можете позволить пользователю перейти к следующему шагу или нет.

Это должно дать вам приблизительное представление о том, как приступить к проверке.Для более точного ответа вам необходимо опубликовать больше кода и данных, предпочтительно рабочий стек.