Как динамически привязать один конкретный шаг мата в mat-stepper к различным формам на основе выбора

Question

В настоящее время я использую коврик-горизонтальный степпер с четырьмя ступенями. На моем втором шаге есть элемент управления mat-select для пользователей, чтобы выбрать, какую форму загружать на третьем шаге. Мне удалось связать различные формы с третьим элементом управления mat-step в моей функции component.ts на основе выбора в 2nd шаг. Однако моя проблема в том, что я не могу изменить свой выбор после того, как был сделан один выбор, что приводит к тому, что третий шаг коврика уже связан с формой.

HTML во 2-м шаге:

<mat-step [stepControl]="secondFormGroup">
   <mat-form-field>
            <mat-select placeholder="Select Protocol *" 
                  (selectionChange)="isSelectionChanged($event)">
              <mat-option value="form1">form1</mat-option>
              <mat-option value="form2">form2</mat-option>
            </mat-select>
    </mat-form-field>
</mat-step>

HTML в 3-м шаге

<mat-step [stepControl]="getProtocolForm">
        <div *ngIf='loadForm1'>
            <app-form1 #form1Component></app-form1>
        </div>
        <div *ngIf='loadForm2'>
            <app-form2 #form2Component></app-form2>
        </div>
        <div style="margin-top: 10px;float:right">
          <button mat-button matStepperPrevious>Back</button>
          <button mat-button matStepperNext>Next</button>
        </div>
</mat-step>

Поскольку каждая форма на самом деле является формой, обернутой в компонент, я использовал ViewChild() для доступа к каждому компоненту.

В компоненте тс:

formSelection:Selection;
loadForm1:boolean = true;
loadForm2:boolean = true;
@ViewChild(Form1Component) form1Component: Form1Component;
@ViewChild(Form2Component) form2Component: Form2Component;

isSelectionChanged(change:MatSelectChange){
    if(change.value == `form1`){
       this.formSelection = Selection.Form1;
       this.loadForm1 = true;
       this.loadForm2 = false;
    }else{
      this.formSelection = Selection.Form2;
      this.loadForm1 = false;
       this.loadForm2 = true;
    }
  }

get getProtocolForm(){
    if(this.formSelection)
    {
      return this.formSelection == Selection.Form1? 
      this.form1Component.subForm1: this.form2Component.subForm2;
    }else{
      return null;
    }
  }

Если была выбрана форма Form1, мы хотели бы перейти на форму Form2.

Ошибка: невозможно прочитать свойство 'subForm2' из неопределенного.

Ожидание:
Есть ли лучшее решение для решения Form2 DOM, не отображаемого с условием ngIf, когда изменение выбора происходит после того, как mat-step уже связан с формой?

Надеюсь, мое описание не смущает.

Любой совет будет очень признателен.