Angular reactive FormGroup is not reset in third party controls

Question

I am using Angular6 and angular material stepper. There are three flows in which stepper control have one form and second stepper control have 2 input fields. When i have entered the firstStepperCtrl and navigate to second stepper and click on prev and come to second stepper which shows the validation.

Without touching the form , the validation is showing , how to reset the stepper and validate the stepper if second form field has been touched.

Here is the mark up:

    <md-horizontal-stepper [linear]="isLinear" #stepper>
        <md-step [stepControl]="firstFormGroup">
            <form [formGroup]="firstFormGroup">
                <ng-template mdStepLabel>Fill out your name</ng-template>
                <md-form-field>
                    <input mdInput placeholder="Last name, First name" formControlName="firstCtrl" required>
                </md-form-field>
                <div>
                    <button md-button mdStepperNext>Next</button>
                </div>
            </form>
        </md-step>
        <md-step [stepControl]="secondFormGroup">
            <form [formGroup]="secondFormGroup"  #formDirective="ngForm">
                <ng-template mdStepLabel>Fill out your address</ng-template>
                <md-form-field>
                    <input mdInput placeholder="Address" formControlName="secondCtrl" required>
                </md-form-field>
            <md-form-field>
                    <input mdInput placeholder="phoneNo" formControlName="secondCtrlPhoneNo" required>
                </md-form-field>
                <div>
                    <button md-button mdStepperPrevious>Back</button>
                    <button md-button mdStepperNext>Next</button>
          <button md-button (click)="resetWholeStepper(stepper)">Reset</button>
            <button md-button (click)="reset2Stepper()">Reset1</button>
                </div>
            </form>
        </md-step>
        <md-step>
            <ng-template mdStepLabel>Done</ng-template>
            You are now done.
            <div>
                <button md-button mdStepperPrevious>Back</button>
        <button md-button (click)="resetStepper(stepper)">Reset</button>

            </div>
        </md-step>
    </md-horizontal-stepper>

app.component.ts

export class AppComponent implements OnInit, AfterViewInit {
  private ngVersion: string = VERSION.full;

  isLinear = false;
  firstFormGroup: FormGroup;
  secondFormGroup: FormGroup;

  constructor(private _formBuilder: FormBuilder,) { }

  // Event fired when component initializes
  ngOnInit() {
    this.firstFormGroup = this._formBuilder.group({
      firstCtrl: ['', Validators.required]
    });
    this.secondFormGroup = this._formBuilder.group({
      secondCtrl: ['', Validators.required],
      secondCtrlPhoneNo:['',Validators.required]
    });
  }

  // Event fired after view is initialized
  ngAfterViewInit() {
  }

  resetWholeStepper(stepper: MdStepper){
    stepper.selectedIndex = 0;
  }
  reset2Stepper1(formDirective: FormGroupDirective){
    alert(2);
    formDirective.resetForm();
    // this.secondFormGroup.clearValidators();
   this.secondFormGroup.reset();
  }

[screencast link of issue]]1

demo

Angular reactive FormGroup is not reset in third party controls

0 Answers0