1

I want to create a horizontal stepper (Sh) inside of a vertical stepper (Sv). Inside Sh is a select which is required. The select becomes red when unselected but the stepper moves forward anyways. Why?

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>

I have tried it with a submit button but even then it isn't working. What do I miss?

flyingAlemannian
  • 175
  • 2
  • 13
  • You've to use `[stepControl]`. Check the respective question https://stackoverflow.com/questions/50261982/mathorizontalstepper-stepcontrol-with-template-driven-forms – Sivakumar Tadisetti Sep 03 '18 at 09:23
  • @JavascriptLover-SKT have done it, still not working. Link: https://material.angular.io/components/stepper/overview below optional Types of steps – flyingAlemannian Sep 03 '18 at 12:23
  • @JavascriptLover-SKT never mind. Now it works fine! I forgot to set the stepper 'linear' and replace ngModel by formControlName Thank you. – flyingAlemannian Sep 03 '18 at 12:47

0 Answers0