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

Question

我的要求是我需要创建一个带有嵌套组件的表单.我正在为每个表单字段创建组件意味着对于文本框会有一个组件,对于单选按钮会有另外一个组件就像明智一样.
<form [formGroup]="myForm">
<textbox-component></textbox-component>
<radioButton-component></radioButton-component>
</form>

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

但是我找不到任何解决方案我们如何能够将反应形式与组件嵌套.

Answer 1

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

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

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

您的父组件可以是这样的

<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的反应形式轻松创建和维护.您也可以轻松添加验证.

在回答之前我跟着这些链接

1. stackoverflow上类似的东西

2. 角度2动态形式

Answer 2

Mhesh 的回答的附加说明，您可以[parentFormGroup]在不注入HTML 的情况下构建相同的解决方案。您可以按照有关可重用表单组的堆栈溢出帖子来执行此操作。

这真的很好。

例子

要采用现有的解决方案，您可以执行相同的操作，除了：

你的父组件可以是这样的，不需要传入任何额外的参数

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

另外请注意，您可以像这样设置表单组：

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

子文本框组件

<div class="form-group" [formGroup]="controlContainer.control">
  <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>

要启用此功能，您需要将 aControlContainer注入您的@Component

@Component({
    moduleId: `MODULE_ID_HERE`,
    selector: "child-textbox-component",
    templateUrl: "childTextbox.component.html",
})
export class ChildTextboxComponent {
    constructor(private controlContainer: ControlContainer, OTHER_PARAMETERS) {
    }
}