Question

我目前正在使用整体水平四个步骤的水平卧式步进机。在第二步中，有一个mat-select控件供用户选择在第三步中要加载的表单。我成功地将不同的表单绑定到了component.ts函数中的第三个mat-step控件中，该控件基于第二步中的选择步。但是，我的问题是，做出一个选择后，我无法更改选择，这导致第三步已与表格绑定。

HTML在第二步：

<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进入第三步

<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（）访问每个组件。

在组件ts中：

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”。

期望：
是否有更好的解决方案来解决未使用ngIf条件呈现的Form2 DOM，而在mat-step已与表单绑定之后发生选择更改？

希望我的描述不会引起混淆。

任何建议将不胜感激。

如何根据选择动态地将mat-stepper中的一个特定mat步骤绑定到不同形式

0 个答案: