-1

我正在创建一个有 4 个步骤的垫子步进器的角度应用程序。用户必须一一完成这些步骤。只有当他在第一步中完成表单时，他才能通过单击表单中的按钮而不是单击步进器标签进入下一步。完成这些步骤后，他仍然可以通过单击步进器标签访问所有已完成的步骤。我知道这可以通过线性和完整属性来实现，并且有很多示例可用。

场景是，如果用户完成到第 4 步并且他返回到第 2 步，以第二步的形式更改任何内容，则必须禁用第 3 步和第 4 步（即使它已完成，它也必须变为禁用且不可编辑并且用户必须像开始时那样通过按钮导航）。是否有可能在 mat stepper 中实现这一点？

4

2 回答 2

0

看看这个页面的第一个例子： https ://material.angular.io/components/stepper/examples

在这里，他们使用了一个editable可以设置为true或的属性false。

我的建议是，只要用户返回到第 1 步（例如，从第 4 步开始），请使用此属性，然后检查表单更改。如果该页面中有表单更改，则editable设为 false。

这里有2个案例：

1) A single component rendering child components
**************************
<mat-horizontal-stepper linear #stepper>
  <mat-step [stepControl]="firstFormGroup" [editable]="isEditable">
      <child-component-1></child-component-1>
  </mat-step>
  <mat-step [stepControl]="firstFormGroup" [editable]="isEditable">
      <child-component-2></child-component-2>
  </mat-step>
<mat-horizontal-stepper>

If this is the case, what you can do is, use an @Output event emitter from each form and emit a value stating that there is a formchange. If that emitted value is present, then make the [editable] to false;

Something like this: 

@Output() formChanged: EventEmitter = new EventEmitter<boolean>();

if (form1.invalid) {
  this.formChanged.emit(false);
}
*****************************
2) Condition 2: If you have forms directly under your <mat-step> simply set the value of [editable] in the same component. 

<mat-horizontal-stepper linear #stepper>
  <mat-step [stepControl]="firstFormGroup" [editable]="isEditable">
    <form-1>      
    </form-1>
  </mat-step>
  <mat-step [stepControl]="secondFormGroup" [editable]="isEditable">
    <form-2>
    </form-2>
  </mat-step>
  
</mat-horizontal-stepper>


Something like, 

if (form1.invalid) { 
   this.isEditable = false;
}
于 2021-05-17T03:41:51.153 回答
0

不确定这是您想要的确切答案，但请尝试一下。

您可以获取每个 mat step header 的索引并根据它应用逻辑。

组件.html

<mat-horizontal-stepper linear="true" #stepper (selectionChange)="setIndex($event)" (click)="triggerClick()">

组件.ts

setIndex(event) {
  this.selectedIndex = event.selectedIndex;
}

triggerClick() {
  console.log(`Selected tab index: ${this.selectedIndex}`);
}

或者

您可以通过单击标签来阻止用户，这样用户就无法通过标题进入步骤

在组件.ts

import { ViewEncapsulation } from '@angular/core';
@Component({
   .......
   encapsulation: ViewEncapsulation.None, //add this line
})

在 CSS 中

.mat-horizontal-stepper-header { 
  pointer-events: none !important; 
}

这是两种想法的示例

堆栈闪电战

于 2021-05-14T06:53:29.773 回答