步进角材料自定义配置

Question

我想这样配置我的step from angular material:

当我单击一个步骤时，状态在已验证或未验证之间切换。在这之后，只有下一步可以点击。

所以，只要这一步不是有效的，我就不能点击下一步。

我不知道该怎么做。我需要一些帮助。我看到了验证器之类的东西。需要，但我不知道如何使它像我需要的。

谢谢。

Answer 1

您正在寻找与线性Whether the validity of previous steps should be checked or not.相结合的stepControlThe top level abstract control of the step.，这取决于您如何设计，您可以跳过stepControl。我发现它更容易给每一步它自己的formControl将包含验证器和字段和linear将确保表单是有效的，然后用户可以继续。

@Input()
stepControl: AbstractControlLike

如

<h1>Thing {{ id }}</h1>
<mat-horizontal-stepper #stepper [selectedIndex]="selectedIndex" labelPosition="bottom" linear="true">
<mat-step label="One" [stepControl]="oneForm">
<my-one #one></my-one>
</mat-step>
<mat-step label="Two" [stepControl]="twoForm">
<my-two #two></my-two>
</mat-step>
<mat-step label="Three" [stepControl]="threeForm">
<my-three #three></my-three>
</mat-step>
</mat-horizontal-stepper>

工作示例:https://stackblitz.com/edit/stepper-validate-form-ewtpka?file=src%2Findex.html,src%2Fapp%2Fparent%2Fparent.component.html