Question

我正在使用Angular6和角度材质步进器。有三个流程，其中步进控制具有一个形式，第二步进控制具有2个输入字段。当我输入firstStepperCtrl并导航到第二个步进器并单击prev并进入第二个步进器，显示验证。

如果没有触摸表单，则会显示验证，如果已触摸第二个表单字段，如何重置步进器并验证步进器。

这是标记：

    <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

demo

Angular反应FormGroup未在第三方控件中重置

0 个答案: