angular - Angular Material Stepper 如何使 FormGroup 失效

Question

角度材料 Stepper 组件可以与这样的表单组连接

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

堆栈闪电战

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

所以，我的问题是，步进器在表单上更改了哪个属性以使表单无效？

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

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

Answer 1

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

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

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

{ "required": true }