Angular Material Stepper 的验证

Question

我的应用程序有一个步进器，其中一个步骤里面有 2 个表单，主表单和另一个表单。 主窗体是步进控制所需的窗体。 另一种形式是可选的（但如果用户输入任何输入，我仍然想验证输入）。 两种形式都是反应形式。

问题是，当我尝试在步进器中移动到下一步时，正在验证另一种形式并显示所有错误（尽管它不是步进控制）。

我希望的期望行为是，当我单击下一步时，它不会影响其他表单，并且只验证主表单，我该怎么做才能实现它？

谢谢！

微风

Answer 1

请参阅此stackblitz示例。

您可以验证表单并防止在<mat-step>之间切换，直到错误消失。

Answer 2

这是你的答案

`

<mat-horizontal-stepper [linear]="true" 
   (selectionChange)="stepChanged($event, stepper);">
   <mat-step [stepControl]="hiddenForm" label="step 1"
     <form [formGroup]="heroFormGroupArray[0]">
       <mat-form-field>
         <mat-label>Hero Name</mat-label>
         <input [formControl]="heroName"matInput>
         ...
       </mat-form-field>
     </form>
     <button (click)="AddNewHero()">Add New Hero</button>
   </mat-step>
 </mat-horizontal-stepper>

`

`

export class heroStepComponent implements OnInit {
   constructor(){
     ...
   }
   ngOnInit(){
     ...
   }
   stepChanged(event, stepper){
     stepper.selected.interacted = false;
   }
 }

`