Typescript Angular 2 使用嵌套组件创建react式表单

发布于03月06日

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>

我想用react 式表单来创建这个表单，就像我想要的那样

但我找不到任何解决方案，我们怎么能把react 形式嵌套在

推荐答案

在我的研究和；实验我找到了我的问题的一个答案，所以我自己回答.如果能节省别人的时间，我会很开心.

如果您想创建带有嵌套组件的react 式表单，则可以执行以下操作

在这里，我创建了一个包含两个嵌套组件的表单，一个用于textbox&；单选按钮的其他

您的父组件可以是这样的

<form [formGroup]="myForm">
    <子文本框组件 [parentFormGroup]="myForm">
    </子文本框组件>
    <子单选按钮组件 [parentFormGroup]="myForm">
    </子单选按钮组件>
</form>

我们将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>

这里的控件是模型类，其中包含要为这些对象显示的数据

通过这种方式，可以使用嵌套组件生成表单，

在回答这个问题之前，我遵循了这些链接