0

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

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

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

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

有没有办法在垫子步进器中实现这种行为？如果我的问题不清楚，请告诉我，我会尽力更详细地描述它。

4

1 回答 1

2

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

<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

于 2022-01-21T13:17:01.237 回答