Компонент Angular Material Stepper предотвращает переход ко всем непосещенным шагам

Question

Я использую компонент Angular Material Stepper.

В моем контенте у меня есть отдельные кнопки, которые помогают пользователю перейти к следующему шагу после завершения задачи на текущем шаге.

Я хочу запретить пользователю посещать следующие шаги, нажимая кнопки шагов шагового компонента.

Однако я хочу, чтобы пользователь мог вернуться к предыдущему шагу с помощью кнопок шага шагового компонента.

Я не использую форму внутри степпера. Я видел свойство Linear компонента, но оно не соответствует моим требованиям.

Вкратце, не позволяйте пользователю переходить к «непосещенным» шагам, нажимая кнопки шагов шагового компонента.

angular angular-material2 angular-material-stepper mat-stepper

5

Temp O'rary 23 Окт 2018 в 14:11

Answer 1

Решение, которое я нашел для этой проблемы, - использовать атрибут шага completed. Обратитесь к строке кода, приведенной ниже:

<mat-step [completed]="isCompleted">

Когда isCompleted истинно, будет включен следующий шаг.

Примечание. Чтобы это работало, шаговый компонент должен находиться в режиме linear. Это можно сделать, установив атрибут linear на шаговом компоненте, например

<mat-horizontal-stepper linear>

16

Temp O'rary 24 Окт 2018 в 10:02

Answer 2

Проверьте эту ссылку. Вам нужно использовать линейный степпер.

Шаговый двигатель, помеченный как линейный, требует, чтобы пользователь выполнил предыдущие шаги, прежде чем продолжить. Для каждого шага атрибут stepControl может быть установлен на верхний уровень AbstractControl, который используется для проверки действительности шага.

Пример показан ниже

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

@Component({
  selector: 'stepper',
  templateUrl: './stepper.component.html'
})
    export class StepperComponent  {
       isLinear = true;
      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]
        });
      }
    }

И HTML это

<mat-vertical-stepper [linear]="isLinear">
  <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 mat-raised-button color="primary" 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 mat-raised-button color="primary" matStepperPrevious>Back</button>
        <button mat-button mat-raised-button color="primary" matStepperNext>Next</button>
      </div>
    </form>
  </mat-step>
  <mat-step>
    <ng-template matStepLabel icon>Done</ng-template>
    You are now done.
    <div>
      <button mat-button mat-raised-button color="primary" matStepperPrevious>Back</button>
    </div>
  </mat-step>
</mat-vertical-stepper>

2

Nikhil Chandu 23 Окт 2018 в 11:36

Компонент Angular Material Stepper предотвращает переход ко всем непосещенным шагам

2 ответа

Похожие вопросы

Новые вопросы

angular