如何在Angular 2中以反应形式嵌套形式答案

【问题标题】：How to have nested form in reactive forms in Angular2+如何在Angular 2中以反应形式嵌套形式
【发布时间】：2018-04-16 08:54:14
【问题描述】：

我有两个类如下

export interface Demo {
    Id: number;
    Name: string;
    Parent: DemoParent;
}

export interface DemoParent {
    Id: number;
    Title: string;
}

由于demo 和parent 之间的关系是1-0..1，我想以相同的形式对其进行编辑。

我的表单定义如下（为简单起见，我删除了所有其他字段和验证器）

this.form = this.fb.group({
      Name: [''],

    });

现在我应该如何将parent 添加到我的表单中，我用谷歌搜索了大部分文章都是关于嵌套数组的。

我不想展平我想要保持层次结构的对象

更新

我在下面试过了，还是有问题，

this.form = this.fb.group({
      Name: [''],
      Parent: {
        Title: ['']
      }
    });

<input type="text" formControlName="Parent.Title"/>

【问题讨论】：

标签： javascript html forms angular

【解决方案1】：

如果其他人有同样的问题

this.form = this.fb.group({
      Name: [''],
      Parent: this.fb.group({
        Title: ['']
      })
    });

<div class="row">
  <form [formGroup]="form">

    <input type="text" formControlName="Name"/>

    <div formGroupName="Parent">
      <input type="text" formControlName="Title"/>
    <div>

   </form>
</div>

【讨论】：