角度 - 角度材料2步进控制

Question

我使用Angular Material 2 Stepper设置了一个线性步进器.

我有不同组件中的表单(组件-a,组件-b,组件-c).在我的主容器组件(容器组件)中,我希望线性步进器在其表单有效时"逐步"遍历每个组件.

是否有某种功能可以stepControl与步进器进行对话以使其正常工作？

我附上了步进器的文档和应用程序的StackBlitz版本.此外,我也有工作的回购链接.

Material Stepper组件:https://material.angular.io/components/stepper/overview

StackBlitz:https://stackblitz.com/edit/angular-material2-issue-mjmu9u ？ file = app/app.component.ts

Github:https://github.com/sam11385

Answer 1

我们遇到了完全相同的问题,经过几天的反复试验后找到了可行的解决方案.基本上,由于步骤分为几个组件,每个组件都定义一个表单,并且它们对应的stepControl必须在父组件中,因此必须将子组件中的FormGroup发送到定义步进器的父组件.创建FormGroup之后,发出一个事件并让父级监听该事件,并通过该事件传递FormGroup.您可以为所有子项应用此项,为每个子项创建一个单独的事件,并为每个子项创建一个单独的侦听器.

在子组件中:

1. 宣布活动

   @Output() notify: EventEmitter<FormGroup> = new EventEmitter<FormGroup>();                                                                                                         
   

2. 将formGroup发送到父组件

   this.notify.emit(this.myFormGroup);                                                                                                                                                
   

在包含mat-stepper的stepControl的父组件中:

1. 在组件(.ts)中,添加一个将接收和设置formgroup的函数:

   myFormGroup: FormGroup;
   onNotify(formGroup: FormGroup): void {
     this.myFormGroup = formGroup;
   }
   

2. 在html中,添加通知监听器:

   <mat-step [completed]="false" [stepControl]="myFormGroup">
     <ng-template matStepLabel>Step 1</ng-template>
     <app-child (notify)='onNotify($event)'></app-child>
   </mat-step>                                                                                                                                            
   

嵌套组件说明:https://www.themarketingtechnologist.co/building-nested-components-in-angular-2/