如果前面所有步骤的 FormGroup 都有效，如何配置 mat-stepper 只允许转到最后一步？

Question

我正在为一个对话框使用 mat-stepper，该对话框用于创建新实体和编辑特定类型的现有实体。步进器由四个步骤组成。前三个步骤中的每一个都包含一个用于输入数据的表单，而最后一步只是通过前三个步骤输入的数据的 summary/overview。

如果 he/she 在所有三个步骤中都输入了有效数据，我只想允许用户转到最后一步。为此，我将 linear 属性添加到步进器以强制用户完成每个步骤。当用户通过对话框创建新实体时，这非常有效。但是，在编辑现有实体时，不可能在至少单击第 2 步之前直接转到第 3 步。在编辑模式下打开对话框时，我以编程方式用以下数据填充步骤中的所有字段现有实体，所以我希望允许用户直接转到任何步骤，只要在当前可见的步骤中输入有效数据即可。这是一个显示问题的堆栈闪电战： stackblitz

尽管所有字段都已以编程方式填写，但我不能在单击前面的步骤之前直接转到步骤 3 或 4。

我第一次尝试解决这个问题是在编辑模式下打开对话框时删除 linear 属性。虽然这具有预期的效果，但它也允许用户清除步骤中的某些字段，然后直接转到最后一步，我不想允许，因为只有在前面的所有步骤都已完成的情况下才能到达最后一步完全填满了有效数据。

有没有办法在 mat-stepper 中实现这种行为？如果我的问题不清楚，请告诉我，我会尽力描述得更详细。

Answer 1

如果您包含一些代码，或者更好的是，堆栈闪电战，这将更容易回答。但是无论如何，您不能简单地以编程方式设置“线性”属性吗？，例如：

<mat-stepper [linear]="this.formGroup.valid" #stepper>

-- 编辑--

在你提出你的 stackblitz 之后，我的建议保持不变——唯一的问题是你有三个不同的表格。所以为了让事情变得简单，我制作了一个由其他三个组成的 globalForm：

globalForm = new FormGroup({
  form1: this.form1,
  form2: this.form2,
  form3: this.form3
});

然后在 html 中我将线性分配给 !globalForm.valid

<mat-stepper [linear]="!globalForm.valid" #stepper>

或者您可以跳过全局表单而只使用

<mat-stepper [linear]="!(form1.valid && form2.valid && form3.valid)" #stepper>

我想这归结为偏好。

无论如何，现在您会看到您可以在开始时跳到末尾，但是如果您清空其中一个字段，您将无法前进，直到您向其添加值。

这是叉子：

https://stackblitz.com/edit/angular-ivy-2mb2b8?file=src%2Fapp%2Fapp.component.html

如果前面所有步骤的 FormGroup 都有效，如何配置 mat-stepper 只允许转到最后一步？

How to configure mat-stepper to only allow going to the last step if FormGroup of all previous steps are valid?

typescript

angular

mat-stepper

angular12