How to put validation in mat-select

Question

I have multiple rows with mat-select.I want to be able to put validation such a way that I should be able to choose minimum of 1 value each.If I don't select 1 value of each type from mat-select then i should not be able to proceed to next step.

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

This html code allows me to display mat-select and displays list of dropwdown values.

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

This is the list of drop down options that i get.

I need a validation that the user should select at least one value of each Time,Key,Segment,Input and Key before proceeding to next step.

Fabian Küng Fabian Küng · Accepted Answer · 2018-12-19T13:48:05

It is a bit difficult to help as you are not posting the complete code e.g. a stackblitz. Especially as it looks like you are using a mat-table and probably want to persist the changes to the datasource.

I threw a quick stackblitz together here that just displays 6 mat-select elements and checks upon selectionChange() whether or not all the types that are marked with the property required are selected. This is reflected in the variable isValid and based on this you could let the user advance to the next step or not.

This should give you a rough idea of how to proceed with the validation. For a more precise answer you would need to post more of your code and data, preferably a working stackblitz.

How to put validation in mat-select

1 Answers