Issue with Angular Material Stepper and Stackblitz example

Question

I'm trying to use the Angular Material stepper version. Tried 7.3.0. But example in StackBlitz doesn't show. Browser view is blank. I tried both Chrome and Firefox

https://stackblitz.com/angular/enxykjbpeao?file=app%2Fstepper-overview-example.ts

And locally when I try it I'm hitting

compiler.js:2426 Uncaught Error: Template parse errors:
Can't bind to 'formGroup' since it isn't a known property of 'form'. ("izontal-stepper [linear]="isLinear" #stepper>
  <mat-step [stepControl]="firstFormGroup">
    <form [ERROR ->][formGroup]="firstFormGroup">
      <ng-template matStepLabel>Fill out your name</ng-template>
      "): ng:///AppModule/StepperComponent.html@5:10
Can't bind to 'formGroup' since it isn't a known property of 'form'. ("
  </mat-step>
  <mat-step [stepControl]="secondFormGroup">
    <form [ERROR ->][formGroup]="secondFormGroup">
      <ng-template matStepLabel>Fill out your address</ng-template>
  "): ng:///AppModule/StepperComponent.html@16:10
    at syntaxError (compiler.js:2426)
    at TemplateParser.push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse (compiler.js:20600)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate (compiler.js:26146)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate (compiler.js:26133)
    at compiler.js:26076

Your stackblitz works fine for me. No errors and I do see the Stepper just like the Stepper demo from the docs. — Uğur Dinç

Vince Vince · Accepted Answer · 2020-02-23T20:56:11

A bit too late but I was facing the same issue. I had to add ReactiveFormsModule to the app.module.ts file. I added it with the lines below :

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

imports: [
  FormsModule,
  ReactiveFormsModule
],

Issue with Angular Material Stepper and Stackblitz example

1 Answers