Stepper Angular 材質自定義配置

Question

我想用這樣的角度材料配置我的步進器：

當我單擊一個步驟時，狀態會在已驗證或未驗證之間切換。 之后，只能點擊下一步。

所以，只要這一步沒有被驗證，我就不能點擊下一步。

我不知道該怎么做。 我需要一些幫助。 我看到了類似 validators.required 的東西，但我不知道如何讓它像我需要的那樣。

謝謝。

Answer 1

您正在尋找 stepControl The top level abstract control of the step. 結合 linear Whether the validity of previous steps should be checked or not. 根據您的設計方式，您可以跳過 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