当一切都没有线性完成时，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：

1. 将mat-stepper 或mat-horizontal-stepper 设为线性，例如：

   <mat-horizontal-stepper linear="true">

2. 将completed 属性添加到第一个mat-step。它使您无需填写表格即可进入第二步。

   <mat-step completed>

3. 不要在拳头上使用stepControl mat-step。例如。

   <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) 技术支持：

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