Angular 更改步骤1中的输入字段时,重置mat步进机步骤2中的值

Angular 更改步骤1中的输入字段时,重置mat步进机步骤2中的值,angular,angular-material,stepper,angular-lifecycle-hooks,Angular,Angular Material,Stepper,Angular Lifecycle Hooks,我使用角材料步进机为我的应用。每个步骤都有单独的组件 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&

我使用角材料步进机为我的应用。每个步骤都有单独的组件

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中输入name时,将从后端加载第二个表单中的address值。如果用户再次更改名称字段,地址字段shld将被重置。我可以重置步进机,但它的设计就像步进机重置不应该发生一样,我应该清除步骤2中的字段。可能的方法是什么是否可以将child 1组件中的此字段绑定到child 2组件的任何生命周期挂钩。请指导我在mat step标记中使用[可编辑]=“true”

看第一个示例代码


示例:

当您在输入名称后进入步骤1,您可以获得地址并可以通过@input传递到第二个组件时,您能否详细说明您在父级中的回答。可能ngOnChanges work我尝试了在子组件中的ngOnChanges上重置字段的逻辑,但不起作用,但正如您所提到的,让我在step1组件的ngOnChanges中尝试。。