Question

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

例如：我有一个组件，它呈现一些选项卡，每个选项卡路由到子路径，并呈现模型的一部分（请参见下面的路径）

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

我在所有子组件中都使用了反应形式，但遇到了麻烦

a）跨所有子路由访问数据（我想我可以通过activatedRoute.parent.data做到这一点），以及；

b）由于保存/取消按钮位于父路径组件中，因此可跨所有子路径验证数据

请问有人对我如何实现这一目标有任何建议吗？（我宁愿使用反应式表单解决方案，也不愿使用模板驱动的表单）

Answer 1

另一种方法非常有效，不需要使用路由器，而是直接使用DI，方法是通过 @Input 装饰器将子formGroups传递给子组件。使用@ angular / material的 mat-accordion 和 mat-tab-group 以非常大的形式对其进行了测试。性能非常好，并且可以将表单很好地分成较小的小块，如您所愿。

为这些子formGroup创建getter函数

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

然后使用

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

在您的孩子中

 @Input() form: FormGroup;

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

Answer 2

如果我对您的理解正确，那么您将某种“大形式”拆分为较小的自包含形式，这些形式分散在多个延迟加载的模块/组件中。您的问题是如何从所有小表格中收集数据。我想到了4种选择。

不要那样做，并保持单一形式-但我认为您不能/不想这样做
使用路由数据传递到目前为止用户填写的全部数据（太复杂的恕我直言）
使用localStorage保留每个表单
更多角度-将部分表单数据存储在共享服务中。

如果将所有内容存储在共享服务中（每个子组件/表单都可以访问），则主组件将能够通过服务访问所有表单数据，并且可以适当地组装适当的请求有效负载。选项3是我会选择的。

Answer 3

是否可以选择创建一个@Injectable类（服务），然后将其注入所有组件以共享数据？

在此服务中，您还可以具有保存按钮观察器，并将事件以这种方式推送到所有组件。

带有父母和子女路线的反应式表格

3 个答案: