Angular Material Stepper Last Step 在没有线性的情况下完成所有操作时可访问

Question

就像标题说的那样，我想让最后一步在剩下的已经填满时才可以访问。

我的步骤如下：1-登录详细信息 -> 2-个人详细信息 -> 3-检查

没有所有细节就去检查是没有意义的。但我不想做线性的，这样你就可以随心所欲地在登录和个人详细信息之间切换。

HTML:

<mat-horizontal-stepper #stepper>
      <ng-template matStepperIcon="edit">
        <mat-icon>check</mat-icon>
      </ng-template>
<mat-step [stepControl]="registerForm" errorMessage="{{ 'REGISTRATION.STEPPER_ERROR_LOGIN' | translate }}"> 
...
 </mat-step>

<mat-step [stepControl]="personalForm" errorMessage="{{ 'REGISTRATION.STEPPER_ERROR_PERSONAL' | translate }}">
...
</mat-step>

<mat-step [stepControl]="registerForm && personalForm" errorMessage="Überprüfung steht aus">
...
</mat-step>
</mat-horizontal-stepper>

TS:

@Component({
  selector: 'app-registration',
  templateUrl: './registration.component.html',
  styleUrls: ['./registration.component.scss'],
  providers: [{
    provide: STEPPER_GLOBAL_OPTIONS, useValue: { showError: true }
  }]
})
export class RegistrationComponent implements OnInit {

Answer 1

解决方案 1：

将optional加到第mat-step

<mat-step [stepControl]="registerForm" errorMessage="{{ 'REGISTRATION.STEPPER_ERROR_LOGIN' | translate }}" optional>

解决方案 2：

设置mat-stepper或mat-horizontal-stepper为线性，如：

<mat-horizontal-stepper linear="true">
在第一个mat-step上加上completed属性。它允许您在不填写表格的情况下进入第二步。

<mat-step completed>
拳头mat-step不要用stepControl。例如

<mat-step ~~[stepControl]="firstFormGroup"~~ completed>

示例代码：

a) HTML:

<mat-horizontal-stepper linear="true" #stepper>
<mat-step completed>
  <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 matStepperNext>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 matStepperPrevious>Back</button>
      <button mat-button matStepperNext>Next</button>
    </div>
  </form>
</mat-step>
<mat-step>
  <ng-template matStepLabel>Done</ng-template>
  You are now done.
  <div>
    <button mat-button matStepperPrevious>Back</button>
    <button mat-button (click)="stepper.reset()">Reset</button>
  </div>
</mat-step>

b）TS：

import {Component, OnInit} from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';

/**
 * @title Stepper overview
 */
@Component({
  selector: 'stepper-overview-example',
  templateUrl: 'stepper-overview-example.html',
  styleUrls: ['stepper-overview-example.css'],
})
export class StepperOverviewExample implements OnInit {
  isLinear = false;
  firstFormGroup: FormGroup;
  secondFormGroup: FormGroup;

  constructor(private _formBuilder: FormBuilder) {}

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

Angular Material Stepper Last Step 在没有线性的情况下完成所有操作时可访问

Angular Material Stepper Last Step accessible when everything is done without linear

angular-material

angular

angular-material-stepper