CODEWITHSUNDEEP
angular-materialangular-reactive-formsstepper
Sandeep
Sandeep

Reputation: 471

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

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

Upvotes: 1

Views: 771

Answers (1)

Arun Amatya
Arun Amatya

Reputation: 51

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>

Upvotes: 2

Related Questions