angular - 具有父级和子级路由的响应式(Reactive)表单

Question

我有一个数据输入表单，我正在使用父/子路由器来定义呈现一些选项卡的父组件，每个选项卡加载正在编辑的实体的一部分。

例如:我有一个渲染一些选项卡的组件，每个选项卡路由到一个子路由并渲染部分模型(请参阅下面的路由)

[
  { 
    path: ':id', 
    component: ParentComponent, 
    resolve: {someModel: SomeModelResolver }, 
    children: [
      { path: '', redirectTo: 'summary', pathMatch: 'full' },
      { path: 'summary', component: SummaryComponent },
      { path: 'other', component: OtherComponent },
      ...
    ]
  }
]

我在所有子组件中使用响应式(Reactive)表单，但遇到了一些麻烦

a)跨所有子路由访问数据(我想我可以通过activatedRoute.parent.data来做到这一点)，并且；

b) 验证所有子路由的数据，因为保存/取消按钮位于父路由组件中

有人对我如何实现这一目标有任何建议吗？ (我更喜欢响应式(Reactive)表单解决方案而不是模板驱动的表单)

Answer 1

另一种方法非常有效，无需使用路由器，而是使用 DI，通过 @Input 装饰器将子 formGroup 传递给子组件。使用 @angular/material 的 mat-accordion 和 mat-tab-group 测试了非常巨大的形式。性能非常好，并且表单可以像您希望的那样很好地分成更小的和平。

为这些子表单组创建 getter 函数

get childform1() {
  return this.form.get(‘childForm1‘) as FormGroup;
}

然后使用

<app-childform [form]=“childform1“></app-childform>

在你的 child

 @Input() form: FormGroup;

然后，您可以轻松地将完整的表单保存在父组件上，并且所有值都会很好地传递到其中。