Question

我正在尝试创建一个与反应形式集成的组件。由于这个特定领域将在整个应用程序中重复使用多次，因此如果我成功做到这一点将对我有很大帮助。想法是，我在页面中有表单（这是一个Ionic项目），此页面将包含FormGroup。在此页面的内部，我将插入组件，并将其传递给FormGroup以及指向该组件的路径。

表格：

form: FormGroup = new FormGroup({
        group1: new FormGroup({
          group2: new FormGroup({
            control: new FormControl('')
          })
        })
      });

例如，如果我想将控件“ control”传递给组件，我会使用@Input（）指令传递表单变量和另一个看起来像这样的变量：

[
  {ctrl: 'group1', type: 'group'}, 
  {ctrl: 'group2', type: 'group'}, 
  {ctrl: 'control', type: 'control'}
]

在组件内部，结果应为：

<form [formGroup]="form">
  <div [formGroup]="controlPath.ctrl[0]">
    <div [formGroup]="controlPath.ctrl[1]">
      <ion-item>
        <ion-input [formControl]="controlPath.ctrl[2]"></ion-input>
      </ion-item>
    </div>
  </div>
</form>

问题是，如果没有手动将其写出来，我想不出任何可以帮助我制作formGroup div的东西。如果有人知道更简单的方法，我将不胜感激。

Answer 1

您可能需要一个递归组件。首先，稍微更改数据格式以使其递归：

[
  {ctrl: 'group1', type: 'group', children:
                        [ {ctrl: 'group2', type: 'group', children: 
                                        [{ctrl: 'control', type: 'control'}]}
]}]

基本上将子数组添加为子数组。

现在您的组件可以定义为：嵌套表单组件

       <div *ngFor='let item of formInfo' >
         <ion-item *ngIf='item.type==='control' >
            <ion-input [formControlName]="item.control"></ion-input>
          </ion-item>
          <div  *ngIf='item.type==='group' [formGroupName]= "item.control" >
         <nested-form-component   
           [formGroup]="form.controls[item.control]"  [formInfo]= "item.children" > 
         </nested-form-component>
        </div>
      <div>

我给组件2个输入，一个formGroup实例 form 和一个formInfo，它是上面重新格式化的数据。

现在在您的托管组件中，

根据数据 formInfo 生成formGroup实例 form ，然后在模板中插入

  <form  [formGroup]="form">
     <nested-form-component  [formGroup]="form"  [formInfo]= "formInfo" > 
         </nested-form-component>
   <form>

在Angular 2中创建嵌套元素

1 个答案: