我正在为我的应用程序使用 Angular 材料步进器。每个步骤都有单独的组件。
父.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>
孩子-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>
孩子-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 组件的任何生命周期挂钩。请指导我