在步骤 1 中更改输入字段时重置垫子步进器步骤 2 中的值

Question

我正在为我的应用程序使用 Angular 材料步进器。每个步骤都有单独的组件。

parent.html：

<mat-horizontal-stepper [linear]="isLinear" #stepper>
  <mat-step >
  <app-child-1></app-child-1>
  </mat-step>

  <mat-step>
  <app-child-2></app-child-2>
  </mat-step>
  
</mat-horizontal-stepper>

child-1

<form [formGroup]="firstFormGroup">
      <ng-template matStepLabel>Fill out your name</ng-template>
      <mat-form-field>
        <mat-label>Name</mat-label>
        <input matInput placeholder="Last name, First name" formControlName="firstCtrl" required>
      </mat-form-field>
      <div>
        <button mat-button matStepperNext>Next</button>
      </div>
    </form>

child-2

<form [formGroup]="secondFormGroup">
      <mat-form-field>
        <mat-label>Address</mat-label>
        <input matInput formControlName="secondCtrl" 
               required>
      </mat-form-field>
      <div>
        <button mat-button matStepperPrevious>Back</button>
        <button mat-button matStepperNext>Next</button>
      </div>
    </form>

它的工作原理就像用户在步骤 1 中输入名称时，第二个表单中的地址值将从后端加载。如果用户再次更改名称字段，则地址字段将被重置。我可以重置步进器，但它的设计就像步进器重置不应该发生我应该清除步骤 2 内的字段。有什么可能的方法来做到这一点。 ? 是否可以将子 1 组件中的此字段绑定到子 2 组件的任何生命周期挂钩。请指导我

Answer 1

在 mat-step 标签中使用 [editable]="true"

先看示例代码，

示例：enter link description here