Значения форм, равные нулю, для углового материала Stepper с использованием динамических форм

Question

Я создал приложение Angular с использованием динамических форм. Вот пример, которому я следовал: https://stackblitz.com/edit/github-gaztsv

Теперь мне нужно создать степпер, и каждый шаг будет содержать новую форму. Я создал компонент и вижу разные формы, но проблема в том, что я не могу получить значения для 2-го шага вперед.

Я считаю, что проблема в том, что Material Stepper ожидает новую форму на каждом шаге, но я не знаю, как решить эту проблему.

Ниже приведен файл DynamoStepper.component.html:

<mat-horizontal-stepper #stepper (selectionChange)="changeStep($event)">
  <mat-step *ngFor = "let stage of stages; let i=index">
    <ng-template matStepLabel>{{stage['Title']}}</ng-template>
      <app-dynamic-form [fields]="regConfig" (submit)="submit($event)">
      </app-dynamic-form>
   <div>
    <button (click)="nextStage(stage['NextId'])" mat-button 
     matStepperNext>{{stage['NextId']? stage['NextId']: 'Submit'}} 
    </button>
   </div>
 </mat-step>
</mat-horizontal-stepper>

DynamoStepper.component.ts

@Component({
 selector: 'app-question-wizard',
 templateUrl: './question-wizard.component.html',
 styleUrls: ['./question-wizard.component.css']
 })
export class QuestionWizardComponent implements OnInit, AfterViewChecked 
{
  stageData = {};
  regConfig: ControlBase[];
  @ViewChild(DynamicFormComponent) form: DynamicFormComponent;
  @ViewChild('stepper') private myStepper: MatStepper;
  nextStage(stage){
   // setting the regConfig to controls[] for next step
   console.log(this.form.value)
  }
 }

Что мне нужно сделать, чтобы форма обновлялась? Я вижу новые элементы управления в форме, когда я регистрирую «this.form», но значения установлены в нуль.