angular2中的嵌套形式

如何使用嵌套字段创建表单，我知道angular2 RC中的

formArray

，但我有点困惑如何正确使用它？ 假设我有一张这样的表格

// Main Form with formArray named as `global_modifier`
this.myForm = this._fb.group({
  .......
  name: ['', []],
  global_modifier: this._fb.array([
    this.initGlobalModifiers()
  ])
  ....
});


removeModifier(i: number) {
  const control = <FormArray>this.myForm.controls['global_modifier'];
  control.removeAt(i);
}

addModifier() {
  const control = <FormArray>this.myForm.controls['global_modifier'];
  control.push(this.initGlobalModifiers());
}

/*global_modifier function having nested fields named `items` .....*/
initGlobalModifiers() {
  return this._fb.group({
  .....
    modifier_title: ['', []],
    items: this._fb.array([
      this.initItems()
    ])
    .........
  });
}


removeItem(i: number) {
  const control = <FormArray>this.myForm.controls['items'];
  control.removeAt(i);
}

addItem() {
  const control = <FormArray>this.myForm.controls['items'];
  control.push(this.initItems());
}

// items intilization
initItems() {
  return this._fb.group({
    item_title: ['', []],
    item_price: ['', []]
  });
}

//将formArray命名为'global\u修饰符的主窗体`
this.myForm=this.\u fb.group({
.......
名称：[''，[]]，
全局\u修饰符：此.\u fb.array([
this.initGlobalModifiers（）
])
....
});
removeModifier（i:编号）{
const control=this.myForm.controls['global_modifier']；
控制。移除（i）；
}
addModifier（）{
const control=this.myForm.controls['global_modifier']；
control.push（this.initGlobalModifiers（））；
}
/*具有名为“items”的嵌套字段的全局_修饰符函数*/
initGlobalModifiers（）{
将此返回。\u fb.group({
.....
修饰符标题：[''，[]]，
项目：此。\u fb.array([
this.initItems（）
])
.........
});
}
removeItem（一：编号）{
const control=this.myForm.controls['items']；
控制。移除（i）；
}
附加项（）{
const control=this.myForm.controls['items']；
control.push（this.initItems（））；
}
//项目初始化
initItems（）{
将此返回。\u fb.group({
项目名称：[''，[]]，
项目价格：[''，[]]
});
}

现在我不知道如何在html中使用此表单

我正在尝试，但没有达到预期效果

<form [formGroup]="myForm" novalidate>
  <input type="text" placeholder="name" formControlName="name" maxlength="50">
  <div formArrayName="global_modifier" *ngFor="let cont of myForm.controls.global_modifier.controls; let i=index, let fst=first">
    <div [formGroupName]="i">
      <input type="text" placeholder="modifier_title" formControlName="modifier_title" maxlength="50">
      <button *ngIf="fst" [ngClass]="{'inputAddButton ':fst}" (click)="addModifier(i)" type="button">
        <i class="fa fa-plus fa-white" aria-hidden="true"></i>
      </button>
      <button *ngIf="!fst" [ngClass]="{'inputDeleteButton ':!fst}" (click)="removeModifier(i)">
        <i class="fa fa-trash-o fa-white" aria-hidden="true"></i>
      </button>

      <!--block For form mlutiple entrys-------------------->
      <div formArrayName="items">
        <div *ngFor="let items of cont.items; let item_index=index, let fst=first">
          <div [formGroupName]="i">
            <div style="margin-bottom:10px">
                     ............... NOTHING dISPLAY HERE ???
            </div>
          </div>
        </div>
      </div>
      <!--block For form mlutiple entrys---=------------>
      <br>
    </div>
  </div>
</form>

............... 这里什么也没有显示？？？

我的代码有什么错误？或

---

有人在angular2中有嵌套表单的工作示例吗

带有嵌套数组的嵌套表单

普朗克： 苏格兰威士忌：

我认为你的错误是错误的

addModifier() {
  const control = <FormArray>this.myForm.controls['global_modifier'];
  control.push(this.initGlobalModifiers());
}

---

检查这个在rc4之前一直适用于我的示例（没有签入新版本）：

表单标记

  ngOnInit() {
    this.myForm = this.formBuilder.group({
    'loginCredentials': this.formBuilder.group({
    'login': ['', Validators.required],
    'email': ['',  [Validators.required, customValidator]],
    'password': ['',  Validators.required]
   }),
    'hobbies': this.formBuilder.array([
      this.formBuilder.group({
        'hobby': ['', Validators.required]
      })
    ])
  });
}

removeHobby(index: number){
    (<FormArray>this.myForm.find('hobbies')).removeAt(index);
  }

  onAddHobby() {
    (<FormArray>this.myForm.find('hobbies')).push(new FormGroup({
      'hobby': new FormControl('', Validators.required)
    }))
  }

创建一个组数组，其中组的索引为数组中的formGroupName，访问方式如下：

<div *ngFor="let hobby of myForm.find('hobbies').controls; let i = index">
<div formGroupName="{{i}}">...</div>
</div>

...

---

onAddHobby（）{
（this.myForm.find（'cabiods'））.push（newformgroup({
“嗜好”：新FormControl（“”，验证器。必填）
}))
}

此示例方法将新formGroup添加到数组中。 当前访问需要指定要访问的控件类型，在本例中，此类型为：

---

removeHobby（索引：编号）{
（this.myForm.find（'cabiods'））.removeAt（index）；
}

---

上面的规则同样适用于从数组中删除特定的表单控件

我刚才说的

formArray

，但仍然感谢您的回答您在我的帖子中提供了formArray示例。我发现将嵌套表单术语的范围缩小到只使用formArray会产生误导，因为内部formGroup也是嵌套表单的一个例子。我将编辑我的帖子，并将其推到顶部。你解决问题了吗？@jmachnik，你知道是否可以使用嵌套的formArray？我的意思是在

地址

内，例如，如果我能在里面有另一个

格式的数组

？提前谢谢。我想这是可能的。只要试试：），让我知道。谢谢，但我正在寻找嵌套从高达3级嵌套，然后你必须继续与第一个嵌套相同的方式：）如果这种方式是可能的，比为什么我张贴这个问题：pI从未尝试过这种3级嵌套，所以我可能是错误的，但我想它应该工作后，一些调整。当我晚上有时间的时候，我会玩玩它：）@MatWaligora你有没有想出一个三层巢穴？

 ngOnInit() {
    this.myForm = this._fb.group({
      address: this._fb.group({
        street : [''],
        city: [''],
        correspondingAddress: this._fb.group({
          street : [''],
          city: ['']
        })
      })
    });
  }

  ngOnInit() {
    this.myForm = this.formBuilder.group({
    'loginCredentials': this.formBuilder.group({
    'login': ['', Validators.required],
    'email': ['',  [Validators.required, customValidator]],
    'password': ['',  Validators.required]
   }),
    'hobbies': this.formBuilder.array([
      this.formBuilder.group({
        'hobby': ['', Validators.required]
      })
    ])
  });
}

removeHobby(index: number){
    (<FormArray>this.myForm.find('hobbies')).removeAt(index);
  }

  onAddHobby() {
    (<FormArray>this.myForm.find('hobbies')).push(new FormGroup({
      'hobby': new FormControl('', Validators.required)
    }))
  }

<h3>Register page</h3>
<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
  <div formGroupName="loginCredentials">
    <div class="form-group">
      <div>
        <label for="login">Login</label>
        <input  id="login" type="text" class="form-control" formControlName="login">
  </div>
  <div>
    <label for="email">Email</label>
    <input  id="email" type="text" class="form-control"  formControlName="email">
  </div>
  <div>
    <label for="password">Password</label>
    <input  id="password" type="text" class="form-control"  formControlName="password">
      </div>
    </div>
  </div>
  <div class="row" >
    <div  formGroupName="hobbies">
      <div class="form-group">
        <label>Hobbies array:</label>
        <div  *ngFor="let hobby of myForm.find('hobbies').controls; let i = index">
          <div formGroupName="{{i}}">
            <input id="hobby_{{i}}" type="text" class="form-control"  formControlName="hobby">
            <button *ngIf="myForm.find('hobbies').length > 1" (click)="removeHobby(i)">x</button>
          </div>
        </div>
        <button (click)="onAddHobby()">Add hobby</button>
      </div>
    </div>
  </div>
  <button type="submit" [disabled]="!myForm.valid">Submit</button>
</form>

'hobbies': this.formBuilder.array

<div *ngFor="let hobby of myForm.find('hobbies').controls; let i = index">
<div formGroupName="{{i}}">...</div>
</div>

onAddHobby() {
(<FormArray>this.myForm.find('hobbies')).push(new FormGroup({
'hobby': new FormControl('', Validators.required)
}))
}

removeHobby(index: number){
(<FormArray>this.myForm.find('hobbies')).removeAt(index);
}