Forms Angular2反应形式，如何将FormGroup和FormArray传递给子组件

我想从一个问题库中构建一个动态表单，就像angular2的动态表单食谱一样。所以我有一个问题：

<div [formGroup]="form">

  <ul *ngIf="question.multi" [formArrayName]="question.key">
    <li *ngFor="let control of form.get(question.key).controls; let lix=index">

      <div>

        <app-text-box [controlName]="lix"></app-text-box>

      </div>
    </li>
  </ul>

  <div *ngIf="!question.multi">
    <app-text-box [controlName]="question.key"></app-text-box>
  </div>
</div>

<input class="form-control"
 [formControlName]="controlName"
 [id]="controlName" type="text">

<div [formGroup]="form" class="col-md-10" >

  <ul *ngIf="question.multi" [formArrayName]="question.key" class="list-group">
    <li *ngFor="let control of form.get(question.key).controls; let lix=index">

      <div>

        <app-text-box [form]="form" [arrayName]="question.key" [controlName]="lix"></app-text-box>

      </div>
    </li>
  </ul>

  <div *ngIf="!question.multi">
    <app-text-box [form]="form" [controlName]="question.key"></app-text-box>
  </div>
</div>

<div [formGroup]="form">
  <div [formArrayName]="arrayName">
    <input  class="form-control" [formControlName]="controlName" [id]="controlName" type="text">
  </div>
</div>

但这是行不通的：

./TextBoxComponent类TextBoxComponent-inline中出错 模板：0:28原因：formControlName必须与父级一起使用 formGroup

如何将有关FormGroup的信息获取到组件中

我这样试过： 问题部分：

<div [formGroup]="form">

  <ul *ngIf="question.multi" [formArrayName]="question.key">
    <li *ngFor="let control of form.get(question.key).controls; let lix=index">

      <div>

        <app-text-box [controlName]="lix"></app-text-box>

      </div>
    </li>
  </ul>

  <div *ngIf="!question.multi">
    <app-text-box [controlName]="question.key"></app-text-box>
  </div>
</div>

<input class="form-control"
 [formControlName]="controlName"
 [id]="controlName" type="text">

<div [formGroup]="form" class="col-md-10" >

  <ul *ngIf="question.multi" [formArrayName]="question.key" class="list-group">
    <li *ngFor="let control of form.get(question.key).controls; let lix=index">

      <div>

        <app-text-box [form]="form" [arrayName]="question.key" [controlName]="lix"></app-text-box>

      </div>
    </li>
  </ul>

  <div *ngIf="!question.multi">
    <app-text-box [form]="form" [controlName]="question.key"></app-text-box>
  </div>
</div>

<div [formGroup]="form">
  <div [formArrayName]="arrayName">
    <input  class="form-control" [formControlName]="controlName" [id]="controlName" type="text">
  </div>
</div>

TextBoxComponent：

<div [formGroup]="form">

  <ul *ngIf="question.multi" [formArrayName]="question.key">
    <li *ngFor="let control of form.get(question.key).controls; let lix=index">

      <div>

        <app-text-box [controlName]="lix"></app-text-box>

      </div>
    </li>
  </ul>

  <div *ngIf="!question.multi">
    <app-text-box [controlName]="question.key"></app-text-box>
  </div>
</div>

<input class="form-control"
 [formControlName]="controlName"
 [id]="controlName" type="text">

<div [formGroup]="form" class="col-md-10" >

  <ul *ngIf="question.multi" [formArrayName]="question.key" class="list-group">
    <li *ngFor="let control of form.get(question.key).controls; let lix=index">

      <div>

        <app-text-box [form]="form" [arrayName]="question.key" [controlName]="lix"></app-text-box>

      </div>
    </li>
  </ul>

  <div *ngIf="!question.multi">
    <app-text-box [form]="form" [controlName]="question.key"></app-text-box>
  </div>
</div>

<div [formGroup]="form">
  <div [formArrayName]="arrayName">
    <input  class="form-control" [formControlName]="controlName" [id]="controlName" type="text">
  </div>
</div>

---

但是，如果没有FormArray，则会产生一个错误。

为什么不基于arrayName有条件地呈现带或不带formArrayName的div？如何在不写入两次输入字段的情况下实现这一点？