angular6 - Angular リアクティブ FormGroup がサードパーティ コントロールでリセットされない

Question

Angular6 と角材ステッパーを使用しています。ステッパー コントロールには 1 つのフォームがあり、2 つ目のステッパー コントロールには 2 つの入力フィールドがある 3 つのフローがあります。firstStepperCtrl を入力して 2 番目のステッパーに移動し、prev をクリックして 2 番目のステッパーに移動すると、検証が表示されます。

フォームに触れずに、検証が表示され、2番目のフォームフィールドが触れられた場合にステッパーをリセットしてステッパーを検証する方法が表示されます。

マークアップは次のとおりです。

    <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();
  }

[問題のスクリーンキャスト リンク]] 1

デモ