0

当我按下下一步按钮时，步进器不会进入下一步我错过了什么？？

我的.component.html

 <mat-horizontal-stepper #stepper [linear]="false">

    <mat-step [stepControl]="firstFormGroup">
      <form [formGroup]="firstFormGroup">
          <ng-template matStepLabel>Fill out your name</ng-template>
        <mat-form-field>
          <input matInput  placeholder="Last name, First name" formControlName="firstCtrl" required>
        </mat-form-field>
        <div>
          <button mat-button mdStepperNext>Next</button>
        </div>
      </form>
    </mat-step>

    <mat-step [stepControl]="secondFormGroup">
      <form [formGroup]="secondFormGroup">
        <ng-template matStepLabel>Fill out your address</ng-template>
        <mat-form-field>
          <input matInput  placeholder="Address" formControlName="secondCtrl" required>
        </mat-form-field>
        <div>
          <button mat-button mdStepperPrevious>Back</button>
          <button mat-button mdStepperNext>Next</button>
        </div>
      </form>
    </mat-step>

    <mat-step>
      <ng-template matStepLabel>Done</ng-template>
      You are now done.
      <div>
        <button mat-button mdStepperPrevious>Back</button>
      </div>
    </mat-step>
  </mat-horizontal-stepper>

我的.component.ts 文件

constructor(
    private _formBuilder: FormBuilder
  ) { 

  // Steper vars
  isLinear = true;
  firstFormGroup: FormGroup;
  secondFormGroup: FormGroup;


  ngOnInit() {

    this.firstFormGroup = this._formBuilder.group({
      firstCtrl: ['', Validators.required]
    });
    this.secondFormGroup = this._formBuilder.group({
      secondCtrl: ['', Validators.required]
    });

    this.allDataload = 'active';

}
4

2 回答 2

1

在每个md-step您需要保留matStepperPrevious和matStepperNext按钮的地方适用

<mat-horizontal-stepper>
  <mat-step>

    <ng-template matStepLabel>Fill out your name</ng-template>

    <div>
      some thing on step 1
      <br/>
      <br>
      <button mat-raised-button color="accent" matStepperNext>Next</button>
    </div>

  </mat-step>
  <mat-step [stepControl]="secondFormGroup">

    <ng-template matStepLabel>Fill out your address</ng-template>

    <div>
      some thing on step 2
      <br>
      <button mat-raised-button color="primary" matStepperPrevious>Back</button>
       <!-----------------------------------below line ---------------->
      <button mat-raised-button color="accent" matStepperNext>Next</button>
    </div>

  </mat-step>
  <mat-step>
    <ng-template matStepLabel>Done</ng-template>
    Something on step 3
    <div>
      <button mat-raised-button color="primary" matStepperPrevious>Back</button>
    </div>
  </mat-step>

</mat-horizontal-stepper>

现场演示

于 2017-10-16T18:39:23.400 回答
0

我通过使用 => matStepperNext 重命名所有 mdStepperNext 来修复

md > 垫子

于 2017-10-16T18:35:04.983 回答