问题描述
angular material Stepper 组件可以像这样连接一个表单Group
<mat-vertical-stepper [linear]="isLinear" #stepper>
<mat-step [stepControl]="firstFormGroup">
<form [formGroup]="firstFormGroup">
....
</form>
</mat-step>
...
现在,我想了解的有趣的事情是,如果您将第一步留空并单击第二步,表单字段将进入无效状态。但是,正如您在 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 }