使用动态表单的Angular Material Stepper的表单值为null

Question

我已经使用动态表单创建了一个Angular应用程序。我遵循的示例是以下示例： https://stackblitz.com/edit/github-gaztsv

现在，我需要创建一个步进器，每个步骤将包含一个新表单。我创建了一个组件，可以看到不同的形式，但是我遇到的问题是我无法从第二步开始获取值。

我认为问题在于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”时，我可以在表单中看到新控件，但是值设置为null。