angular - Angular Material 2 步进控件 [英] angular - Angular Material 2 Stepper Controls

问题描述

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

I set up a linear stepper using the Angular Material 2 Stepper.

我在不同的组件(组件-a、组件-b、组件-c)中有表单.在我的主要容器组件(容器组件)中，我希望有一个线性步进器，当它们的形式有效时，它步进"通过每个组件.

I have forms in different components (component-a, component-b, component-c). In my main container component (container-component) I want to have linear stepper that 'steps' through each component when their form is valid.

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

Is there some sort of functionality to talk up to the stepControl in the stepper to make it properly work?

我附上了步进器的文档和应用程序的 StackBlitz 版本.此外，还有一个指向我正在使用的存储库的链接.

I have attached documentation for the stepper and a StackBlitz version of the application. Also, a link to the repo I have working as well.

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

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

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

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

Github:https://github.com/sam11385

推荐答案

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

We had the exact same problem, and found a working solution after several days of trial and error. Basically since the steps are divided into several components that each define a form, and that their corresponding stepControl must be in the parent, the FormGroup in the child component must be sent to the parent component that defines the stepper. After creating the FormGroup, emit an event and have the parent listen to that event, and pass the FormGroup through that event. You can apply this for all children, creating a separate event for each and a separate listener in the parent for each emitter.

1. 声明事件

1. declare the event

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

将formGroup发送给父组件

emit the formGroup to the parent component

this.notify.emit(this.myFormGroup);                                                                                                                                                

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

1. 在组件(.ts)中，添加一个接收和设置表单组的函数:

1. In the component(.ts), add a function that will receive and set the formgroup:

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

在html中，添加通知监听器:

In the html, add the notification listener:

<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/

这篇关于angular - Angular Material 2 步进控件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！