How does the Angular Material Stepper invalidates the FormGroup

Question

The angular material Stepper component can be connected with a form Group like this

<mat-vertical-stepper [linear]="isLinear" #stepper>
    <mat-step [stepControl]="firstFormGroup">
       <form [formGroup]="firstFormGroup">
          ....
      </form>
    </mat-step>
    ...

Stackblitz

Now, the interesting thing which I would like to understand is, if you leave the first step empty and click on the seconds step, the form field goes to an invalid state. But, as you can see in the stackblitz, at the bottom I list all states of the form and the form-field, but nothing seems to change.

So, my question is, which property is changed on the form by the Stepper to make the form invalid?

Note: In my case I need to add a message if this happens, something like this

<div *ngIf="firstFormGroup.touched && firstFormGroup.invalid">Extra message goes in here</div>

Answer 1

Seems mat-stepper checks each form control validity. If you add fontrol errors, you will see what happens.

{{firstFormGroup.get('firstCtrl').errors | json}}<br />
{{secondFormGroup.get('secondCtrl').errors | json}}<br />

Now if you click next stepp and leave input empty, you will see this output

{ "required": true }