1

I have a total of 8 step form. I have used stepper form for this in register.html with isLinear=true in register.ts file. Now, these 8 steps are coming from steps module which having 8 different step form.

Actually when I used the step form like in doc.

it works fine for me.

But when I tried to call the content of <mat-form-field> from steps form then it is giving me an issue of mat-form-field must contain a MatFormFieldControl. I understood this issue. Now I am stuck at :

How can I use the different step forms under the <mat-form-field> (steps forms are coming from steps folder) with the isLinear = true.

Here is my code:

<mat-horizontal-stepper [linear]="isLinear" #stepper>

    <mat-step [stepControl]="firstFormGroup">
       <form [formGroup]="firstFormGroup">
        <ng-template matStepLabel>Fill out your name</ng-template>
            <mat-form-field>
                 <steponeForm></steponeForm>// For  this its givng me error of mat-form-field must contain a MatFormFieldControl although under steponeForm.html its define
            </mat-form-field>
        <div>
           <button mat-button matStepperNext>Next</button>
        </div>
         </form>
    </mat-step>
       <mat-step [stepControl]="firstFormGroup">
       <form [formGroup]="firstFormGroup">
        <ng-template matStepLabel>Fill out your name</ng-template>
            <mat-form-field>
               <steptwoForm></steptwoForm> // For  this its givng me error of mat-form-field must contain a MatFormFieldControl although under steptwoForm.html its define
            </mat-form-field>
        <div>
           <button mat-button matStepperNext>Next</button>
        </div>
         </form>
    </mat-step>
tomerpacific
  • 4,704
  • 13
  • 34
  • 52
Mohammed
  • 43
  • 7

2 Answers2

1

Here After lots of research, I found the best working solution.

We need to refer each step component to the parent component so that isLinear=true work and it wont allow use to proceed to another step until and unless current step form is not filed.

For more clearance visit here and below is another example for same:

https://stackblitz.com/edit/angular-umvpjs?file=app%2Fstep-one.component.ts.

Hope so, in future this will surely help out to other developers.

Mohammed
  • 43
  • 7
0

<mat-form-field> is expecting a component like matInput, remove <mat-form-field> from your code and try again.

Amrish Ashok
  • 91
  • 1
  • 2
  • 10