title: Angular - How to Validate each step in Angular Material stepper
body: <p>In Angular-12, I am implementing Material Stepper. And it has two (2) steps:</p>
  <p>Component:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>export class SignupCompanyComponent implements OnInit {
    isLinear = true;
    isLoading = false;
    companySetupForm!: FormGroup;
    companyForm!: FormGroup;
    idForm!: FormGroup;
  
    ngOnInit() {
      this.companyForm = this.fb.group({
        companyName: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(100)]]
      });
      this.idForm = this.fb.group({
        registrationNumber: ['', [Validators.required, Validators.maxLength(100)]],
      });
    }
  
    get fc() {
      return this.companyForm.controls;
    };
    get fi() {
      return this.idForm.controls;
    };
  
    onSubmit() {}
  }</code></pre>
  </div>
  </div>
  </p>
  <p>HTML:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;mat-horizontal-stepper [linear]="isLinear" #stepper labelPosition="bottom"&gt;
    &lt;mat-step [stepControl]="companyForm"&gt;
      &lt;form [formGroup]="companyForm"&gt;
        &lt;ng-template matStepLabel matStepperIcon="phone"&gt;Company Info&lt;/ng-template&gt;
  
        &lt;div class="col-12 col-md-12"&gt;
          &lt;div class="form-group"&gt;
            &lt;label for="name"&gt;Company Name:&lt;span style="color:red;"&gt;*&lt;/span&gt;&lt;/label&gt;}
            &lt;input type="text" formControlName="companyName" placeholder="Company Name" class="form-control" required/&gt;
          &lt;/div&gt;
          &lt;div *ngIf="fc.companyName.touched &amp;&amp; fc.companyName.invalid"&gt;
            &lt;div *ngIf="fc.companyName.hasError('required')"&gt;
              &lt;div class="text-danger"&gt;
                Company Name is required!
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div *ngIf="fc.companyName.hasError('minlength')"&gt;
              &lt;div class="text-danger"&gt;
                Company Name cannot be less than 3 characters!
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div *ngIf="fc.companyName.hasError('maxlength')"&gt;
              &lt;div class="text-danger"&gt;
                Company Name cannot be more than 100 characters!
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="card-footer"&gt;
          &lt;button mat-raised-button color="primary" matStepperNext&gt;Next&lt;/button&gt;
        &lt;/div&gt;
      &lt;/form&gt;
    &lt;/mat-step&gt;
    &lt;mat-step [stepControl]="idForm"&gt;
      &lt;form [formGroup]="idForm"&gt;
        &lt;ng-template matStepLabel&gt;Company ID&lt;/ng-template&gt;
        &lt;div class="col-12 col-md-4"&gt;
          &lt;div class="form-group"&gt;
            &lt;label for="registration_number"&gt;Registration Number:&lt;span style="color:red;"&gt;*&lt;/span&gt;&lt;/label&gt;
            &lt;input type="text" formControlName="registrationNumber" placeholder="Registration Number" class="form-control" required/&gt;
          &lt;/div&gt;
          &lt;div *ngIf="fi.registrationNumber.touched &amp;&amp; fi.registrationNumber.invalid"&gt;
            &lt;div *ngIf="fi.registrationNumber.hasError('required')"&gt;
              &lt;div class="text-danger"&gt;
                Company Reg. No. is required!
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div *ngIf="fi.registrationNumber.hasError('maxlength')"&gt;
              &lt;div class="text-danger"&gt;
                Company Reg. No. cannot be more than 100 characters!
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="card-footer"&gt;
          &lt;button mat-raised-button color="black" matStepperPrevious&gt;Back&lt;/button&gt; &amp;nbsp;
          &lt;button mat-raised-button color="success" [disabled]="isLoading" type="submit" (click)="onSubmit()"&gt;
                  &lt;span *ngIf="isLoading" class="spinner-border spinner-border-sm mr-1"&gt;&lt;/span&gt;
                    Submit
                &lt;/button&gt; &amp;nbsp;
          &lt;button mat-raised-button color="warn" (click)="stepper.reset()"&gt;Reset&lt;/button&gt;
        &lt;/div&gt;
    &lt;/mat-step&gt;
  &lt;/mat-horizontal-stepper&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>When each formControl is touched, the Material Stepper works fine. It displays the error immediately.
  But when <strong>Next Button</strong> is clicked no data is filled in Step1 (companyForm), though it didn't move to the next step or form, but no error is displayed.</p>
  <p>I want it to validate each step and display as it is done when each form control is touched.</p>
  <p>How do I achieve this?</p>
  <p>Thanks</p>