Angular Material Stepper 如何使 FormrGroup 失效

如何解决Angular Material Stepper 如何使 FormrGroup 失效

angular material Stepper 组件可以像这样连接一个表单Group

<mat-vertical-stepper [linear]="isLinear" #stepper>
    <mat-step [stepControl]="firstFormGroup">
       <form [formGroup]="firstFormGroup">
          ....
      </form>
    </mat-step>
    ...

Stackblitz

现在，我想了解的有趣的事情是，如果您将第一步留空并单击第二步，表单字段将进入无效状态。但是，正如您在 stackblitz 中看到的，在底部我列出了表单和表单域的所有状态，但似乎没有任何变化。

那么，我的问题是，Stepper 更改了表单上的哪些属性以使表单无效？

注意：在我的情况下，如果发生这种情况，我需要添加一条消息，就像这样

<div *ngIf="firstFormGroup.touched && firstFormGroup.invalid">Extra message goes in here</div>

解决方法

似乎 mat-stepper 检查每个表单控件的有效性。如果您添加 fontrol 错误，您将看到会发生什么。

{{firstFormGroup.get('firstCtrl').errors | json}}<br />
{{secondFormGroup.get('secondCtrl').errors | json}}<br />

现在，如果您单击下一步并将输入留空，您将看到此输出

{ "required": true }