Angular 2 使用嵌套组件创建反应式表单 [英] Angular 2 creating reactive forms with nested components

问题描述

我的要求是我需要创建一个带有嵌套组件的表单.我正在为每个表单字段创建组件意味着文本框将是一个组件，对于单选按钮，同样会有另一个组件.


<textbox-component></textbox-component>
<radioButton-component></radioButton-component>


我想使用响应式表单来创建这个表单，因为我想要我的html 保持不变，仅通过打字稿进行表单验证.

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

解决方案

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

如果你想创建带有嵌套组件的响应式表单，那么你可以做如下

在这里，我正在创建一个包含两个嵌套组件的表单，一个用于文本框 &其他用于单选按钮

你的父组件可以这样

<child-textbox-component [parentFormGroup]="myForm"></child-textbox-component><child-radio-button-component [parentFormGroup]="myForm"></child-radio-button-component></表单>

我们将 FormGroup 对象作为输入传递给在父组件中创建的子组件作为子组件的输入，它们将在它们的子组件中使用这个 FormGroup 对象组件来设计类的特定控件

你的子组件会是这样的

子文本框组件

<标签>{{control.caption}}<input class="form-control" type="text" [title]="control.toolTip"[attr.maxlength]="control.width" [name]="control.name"[value]="control.defaultValue" [formControlName]="control.name"/>

子单选按钮组件

<标签>{{control.caption}}<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"/>{{ 价值 }}

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

通过这种方式，您可以使用嵌套组件生成表单，这样你就不需要把你的表格(可以说是大表格)放在一个成分.您可以将其分解为尽可能多的子组件 &形式将易于创建 &还使用 angular 2 的反应形式进行维护.您也可以轻松添加验证.

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

1. stackoverflow 上的类似内容

2. angular 2 动态表单

My requirement is that I need to create a form with nested components. I am creating components for each form field means for textbox there will be one component, for radio button there will be another component like wise.
<form [formGroup]="myForm">
<textbox-component></textbox-component>
<radioButton-component></radioButton-component>
</form>

And I want to use Reactive forms for creating this form as I want my html to be untouched and have my form validations through typescript only.

But I cant find any solution how can we have reactive forms nested with components.

解决方案

After my research & experiments I found one answer to my question, so answering it myself. If it saves someone's time then I will be happy.

If you want to create reactive forms with nested components then you can do as below

Here I am creating a form with two nested components one for textbox & other for radio button

Your parent component can be like this

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

We are passing FormGroup object as input to child components which has been created in the parent component as input to the child components, they will use this FormGroup object in their component to design specific control of the class

Your child components will be like this

child-textbox-component

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

child-radio-button-component

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

Here control is the model class holding data to be displayed for these child components.

This way you can have your form to be generated using nested components, so that you need not have your form (can say large form) in single component. You can break it down to as many sub components & form will be easy to create & maintain also using reactive forms of angular 2. You can also easily add validations too.

I followed these links before answering this

1. something similar on stackoverflow

2. angular 2 dynamic forms

这篇关于Angular 2 使用嵌套组件创建反应式表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！