angular material 2 stepper mat-step - enclose in a parent div

1
votes

In my form, I have an array of applicants. For each applicant, I want to show a "mat-step" (angular material 2 stepper) and have a parent div with formArrayName="applicants". But when I enclose "mat-step" with a div or ng-container, it doesn't show the step.

<mat-step label="Step 1">
</mat-step>
<ng-container formArrayName="applicants">
    <mat-step *ngFor="let applicant of applicants.controls; let i=index">
    </mat-step>
</ng-container>

I expect the above code to display the mat-step number of times the applicants.

mat-step doesn't show

1
angular-materialreactive-formsstepper

1 Answers

2
votes

mat-step should be enclosed by either mat-horizontal-stepper or mat-vertical-stepper

for example

<mat-horizontal-stepper #stepper="matHorizontalStepper">
    <mat-step [stepControl]="firstStep">
        <form [formGroup]="firstStepFormGroup">
        .............
        </form>
    </mat-step>
    <mat-step [stepControl]="secondStep">
        <form [formGroup]="secondStepFormGroup">
        .............
        </form>
    </mat-step>
</mat-horizontal-step>