Angular Material beta 0.12 mat-stepper 不进入下一步

Question

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

my.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>

my.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';

}

Answer 1

我通过使用 => matStepperNext

重命名所有 mdStepperNext 来修复

md > 垫子

Answer 2

在每个 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>

LIVE DEMO

Angular Material beta 0.12 mat-stepper 不进入下一步

Angular Material beta 0.12 mat-steper dont go to next step

angular-material

angular

angular-material-stepper

my.component.html

my.component.ts 文件