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

Question

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

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

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

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

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

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

Answer 1

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

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

Когда значение isCompleted истинно, это позволит выполнить следующий шаг.

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

<mat-horizontal-stepper linear>

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

1013 *