0

I am using Angular material stepper for my application. Each step has individual components.

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>

it works like when user enters name in step 1 ,the value of address in second form will be loaded from backend. In case if the user changes the name field again , the address field shld get reset. I can reset the stepper but it designed to be like stepper reset should not happen i should clear the field which is inside step 2. What is the possible way to do this. ? is it possible to bind this field in child 1 component to any life cycle hooks of child 2 component. Please guide me

ani
  • 446
  • 1
  • 9
  • 31

1 Answers1

0

use [editable]="true" in mat-step tag

look first example code,

example: enter link description here

kian
  • 1,449
  • 2
  • 13
  • 21
  • Can you elaborate your answer – ani Jan 02 '21 at 12:58
  • in parent when you previous to step 1 after entering name you get address and can pass into second component with @input. maybe ngOnChanges work – kian Jan 02 '21 at 13:14
  • I tried the logic to reset the field on NgOnchanges in child component but is not working – ani Jan 02 '21 at 13:34
  • But as you mentioned let me try in ngonchanges of step1 component.. – ani Jan 02 '21 at 13:50