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

我的要求是我需要创建一个带有嵌套组件的表单.
我正在为每个表单字段创建组件,意味着文本框会有
作为一个组件,对于单选按钮,将有另一个组件,如明智的.
< 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的反应形式.您也可以轻松添加验证.

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

原文链接：https://www.f2er.com/angularjs/143553.html

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

猜你在找的Angularjs相关文章