如何禁用 Angular mat stepper 中的剩余步骤

如何解决如何禁用 Angular mat stepper 中的剩余步骤

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

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

解决方法

不确定是否是您想要的确切答案，但可以尝试一下。

您可以获得每个垫子步骤标题的索引并根据它应用逻辑。

component.html

gray = cv2.cvtColor(img,cv2.COLOR_BGR2GRAY)
canny = cv2.Canny(gray,50,150)

component.ts

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

或

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

在 component.ts 中

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

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

在 css 中

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

这是两个想法的例子

stackblitz

,

看看这个页面的第一个例子： 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;
}