首页 文章

具有父路线和子路线的反应表格

提问于
浏览 次
1

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

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

[
  { 
    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）验证所有子路由中的数据，因为保存/取消按钮位于父路由组件中

有没有人对如何实现这一目标有任何建议？ （我更喜欢反应形式解决方案而不是模板驱动形式）

angular router angular-reactive-forms

3 回答

  • 0

    通过将子formGroups通过@Input装饰器传递给子组件，另一种方法可以很好地工作而不使用路由器而是DI . 使用@ 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;

    然后，您可以轻松地将完整表单保存在父组件上，并且所有值都将很好地传递给它 .

    回复于
  • 0

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

    在此服务中，您还可以使用保存按钮观察器，并将事件推送到所有组件 .

    回复于
  • 1

    如果我理解正确的话，你可以将某种“大型”分成更小的，自包含的形式，分布在多个延迟加载的模块/组件中 . 您的问题是如何从所有小表单中收集数据 . 我想到了4种选择 .

    • 不要那样并保持单一形式 - 但我认为你不能/不想这样做

    • 使用路径数据传递用户填写的整个数据（太复杂的imho）

    • 使用 localStorage 来保留每个表单

    • 更多角度 - 将部分表单数据存储在共享服务中 .

    如果将所有内容存储在共享服务中（每个子组件/表单都可访问），则主组件将能够通过服务和组装正确的请求负载（可能）访问所有表单数据 . 选项3是我要选择的 .

    回复于

相关问题