Я хочу создать горизонтальный степпер (Sh) внутри вертикального степпера (Sv). Внутри Sh есть выбор, который требуется . Выбор становится красным, когда не выбран, но шагер все равно движется вперед. Почему?
HTML:
<mat-vertical-stepper>
<mat-step>
<mat-horizontal-stepper>
<mat-step>
<form name="formProtType">
<mat-form-field>
<mat-select name="selectProtType" placeholder="Select Protocol Type" required [(ngModel)]="selectedType">
<mat-option>None</mat-option>
<mat-option *ngFor="let type of protTypes" [value]="type">{{type}}</mat-option>
</mat-select>
</mat-form-field>
<div>
<button type="submit" mat-button matStepperNext>Next</button>
</div>
</form>
</mat-step>
</mat-horizontal-stepper>
</mat-step>
<mat-step>
</mat-step>
</mat-vertical-stepper>
Я пробовал с помощью кнопки отправки, но даже тогда она не работает. Что мне не хватает?