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

发布时间：2020-12-17 07:55:22 所属栏目：安全来源：网络整理

导读：我的要求是我需要创建一个带有嵌套组件的表单. 我正在为每个表单字段创建组件,意味着文本框会有作为一个组件,对于单选按钮,将有另一个组件,如明智的. form [formGroup] =“myForm” 文本框-成分 /文本框-成分 RADIOBUTTON-成分 / RADIOBUTTON-成分 /形式我

我的要求是我需要创建一个带有嵌套组件的表单.
我正在为每个表单字段创建组件,意味着文本框会有
作为一个组件,对于单选按钮,将有另一个组件,如明智的.
< form [formGroup] =“myForm”>
<文本框-成分>< /文本框-成分>
< RADIOBUTTON-成分>< / RADIOBUTTON-成分>
< /形式>

我希望使用Reactive表单来创建此表单,因为我想要我的
html不受影响,仅通过打字稿进行表单验证.

但我无法找到任何解决方案,我们如何能够嵌套反应形式
组件.

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

如果要使用嵌套组件创建活动表单,则可以执行以下操作

在这里,我创建一个带有两个嵌套组件的表单,一个用于textbox&其他用于单选按钮

您的父组件可以是这样的

<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>

这里控件是保存要为这些显示的数据的模型类
儿童组件.

这样,您可以使用嵌套组件生成表单,
所以你不需要单独的形式(可以说大表格)
零件.你可以将它分解为尽可能多的子组件和形式会
易于创造和保持也使用角度2的反应形式.您也可以轻松添加验证.

在回答这个问题之前,我按照这些链接

> something similar on stackoverflow
> angular 2 dynamic forms

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!