Angular Material Stepper 如何使 FormGroup 失效答案

【问题标题】：How does the Angular Material Stepper invalidates the FormGroupAngular Material Stepper 如何使 FormGroup 失效
【发布时间】：2021-02-19 10:07:33
【问题描述】：

angular材质的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>

【问题讨论】：

步进器组件只检查您传递给stepControl 输入的AbstractControl（FormControl、FormGroup 和FormArray 都继承自的接口）是否已与无效，如下图：github.com/angular/components/blob/…
呈现错误消息的不是步进器，而是 mat-form-field 和 mat-error。因此，为了让这些组件呈现错误，表单应该发生一些事情
否 - 任何任意输入组件（支持ControlValueAccessor iirc）都可以用于响应式表单。它与组件无关，而是因为响应式表单本身无效。
但是为什么，如果我点击“下一步”，输入字段会进入错误状态（显示红色边框）。有些东西应该告诉表格，显示错误，对吧？在thisstackblitz 中，我还断开了表单与步进器的连接，但如果我继续下一步，表单字段会进入错误状态，超级奇怪

标签： angular angular-material angular-reactive-forms angular-forms angular-material-stepper

【解决方案1】：

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

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

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

{ "required": true }

【讨论】：

这些错误从一开始就存在。我仍然没有看到任何变化：stackblitz