Angular 2 使用嵌套组件创建反应式表单

我的要求是我需要创建一个带有嵌套组件的表单。 我正在为每个表单字段创建组件，这意味着文本框将 作为一个组件，对于单选按钮来说，同样会有另一个组件。
<form [formGroup]="myForm">
<textbox-component></textbox-component>
<radioButton-component></radioButton-component>
</form>

我想使用反应式表单来创建此表单，因为我想要我的 html 保持不变，并且仅通过打字稿进行表单验证。

但我找不到任何解决方案，我们如何才能将反应式表单嵌套在 成分。

经过我的研究和实验，我找到了我的问题的答案，所以我自己回答。如果它节省了某人的时间，那么我会很高兴。

如果您想使用嵌套组件创建反应式表单，那么您可以执行以下操作

在这里，我创建一个带有两个嵌套组件的表单，一个用于文本框，另一个用于单选按钮

你的父组件可以是这样的

<form [formGroup]="myForm">
    <child-textbox-component [parentFormGroup]="myForm">
    </child-textbox-component>
    <child-radio-button-component [parentFormGroup]="myForm">
    </child-radio-button-component>
</form>

我们将 FormGroup 对象作为输入传递给已在父组件中创建的子组件 作为子组件的输入，它们将在其子组件中使用此 FormGroup 对象 组件来设计类的具体控制

你的子组件将是这样的

子文本框组件

<div class="form-group" [formGroup]="parentFormGroup">
  <label>
    {{control.caption}}
  </label>
  <input class="form-control" type="text" [title]="control.toolTip" 
    [attr.maxlength]="control.width" [name]="control.name"
    [value]="control.defaultValue" [formControlName]="control.name"/>
</div>

子单选按钮组件

<div class="form-group" [formGroup]="parentFormGroup">
  <label>
    {{control.caption}}
  </label>
  <div>
      <label *ngFor="let value of control.values; let idx = index"
        class="radio-inline" [title]="control.tooltip">
        <input type="radio" [name]="control.name" [formControlName]="control.name"/>
        {{ value }}
      </label>
  </div>
</div>

这里的控件是保存要显示的数据的模型类 子组件。

这样您就可以使用嵌套组件生成表单， 这样你就不需要将你的表格（可以说是大表格）放在一个单独的表格中 成分。您可以将其分解为尽可能多的子组件和表单 使用 Angular 2 的反应形式也可以轻松创建和维护。您也可以轻松添加验证。

在回答这个问题之前我点击了这些链接

1. stackoverflow 上有类似的东西 https://stackoverflow.com/a/40726612/4059279

2. 角度 2 动态形式 https://angular.io/docs/ts/latest/cookbook/dynamic-form.html