角度4：在步进器中单击后退按钮时，如何将上一个表单设置为编辑模式

Question

我是Angular的新手，在我的应用程序中，我正在使用Angular材质设计。

现在我有一个步进器组件，我只有默认的可编辑步进器。我想要做的是需要按以下步骤自定义步进器。

当前代码的工作方式是：

• 如果我点击启用编辑模式按钮，则步骤如下： 可随时进行编辑（在所有步骤中都启用了编辑图标）。如果我单击禁用编辑模式，它将不会 得到编辑。

我希望它为：

• 我需要删除启用/禁用模式按钮
• 如果我从当前表单中单击“后退”按钮，则以前的表单应该处于可编辑模式，而不是所有表单/步骤。

Stackblitz：https://stackblitz.com/edit/angular-stacb4-h9mkge?file=app/snack-bar-overview-example.html

谁能帮我得到这个...

Answer 1

我设置了

[editable]="true"

在所有部分中，然后删除“启用编辑模式”按钮。

新逻辑。如果您输入的信息经过验证，则可以继续进行下一步。您始终可以返回到前面的所有步骤。但是，如果某些步骤未经验证，则无法继续进行下一步。

您可以看到示例here。

编辑

通过动态设置step变量并启用/禁用某些步骤来进行更改。

在更改选择时，将激活selectionChange函数，您可以获取selectedIndex和previousSelectedIndex。在这种情况下，selectedIndex就足够了。

<mat-horizontal-stepper linear #stepper (selectionChange)="selectionChange($event)">

每次触发事件时，step变量都会更新

selectionChange = ($event) => {
  this.step = $event.selectedIndex;
}

然后，您可以根据步骤启用/禁用某些功能。

<mat-step [stepControl]="firstFormGroup" [editable]="step == 0 || step == 1">

您可以看到示例here。