时间戳

首页 > 解决方案 > 当一切都没有线性完成时，Angular Material Stepper Last Step 可访问

angular - 当一切都没有线性完成时，Angular Material Stepper Last Step 可访问

问题描述

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

我的步骤如下所示：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 {

标签： angularangular-materialangular-material-stepper

解决方案

解决方案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>

示例代码：

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

推荐阅读