Dynamic steps with form validity checks not working with stepper component

I am struggling to get a dynamic behavior for a component which uses a mat-vertical-stepper.

Essentially, a particular step should be removable in case some required data is already available which would render it redundant.

The main idea would be to use *ngIf on a mat-step element:

<mat-step *ngIf="requirePersonalInfo">
  <!-- .. -->
</mat-step>

which essentially works but it seems this does not work if we use the built-in error checking.

Here is an example: https://stackblitz.com/edit/angular-5hds7p?file=app%2Fstepper-errors-example.html

Before clicking the checkbox on top, it is not possible to move to the second step. After clicking it however, inserts the second step but does not prevent me from moving to the next step anymore.

Also: Unchecking the checkbox results in two form being rendered at once. The step 2 form slides in from the right while the step 1 form is still visible.

Here is the same stepper but without any dynamic behavior just to show that it works as such: https://stackblitz.com/edit/angular-5hds7p-a9nsv7?file=app/stepper-errors-example.html

My current workaround is to set all elements as touched after the user clicked on "next" and check if the form is valid: https://stackblitz.com/edit/angular-5hds7p-1agpxc?file=app%2Fstepper-errors-example.html

I have seen #11791 and #9132 but I don' think they are related.