Javascript angular2使用输入动态添加到表单模型

这在某种程度上是一个骗局，但希望不那么复杂

如果可以通过输入定义新的FormGroupName，是否可以通过表单输入添加一个全新的FormGroup？如果是，我将使用哪些指令或功能来实现这一点？

用户案例：

用户可以通过输入字段定义新的FormGroupName，然后单击以使用新的FormGroup扩展表单，然后填写该FormGroup的FormControls的值

1用户正常填写现有的“名称”字段

在输入字段中键入2个“foo”

3单击“添加数据组”以创建新的表单组“foo”

4该表单显示新表单组foo的“身高”和“体重”输入字段

5用户填写“foo”的“高度”和“重量”值

6对“bar”重复步骤2-5

7提交：

{  
   "name":"Data Form",
   "foo":{  
      "height":"6.00",
      "weight":"300"
   },
   "bar":{  
      "height":"5.11",
      "weight":"260"
   }
}

添加的FormGroups中的FormControls将始终保持一致。 因此，在上述示例中，始终使用“重量”和“高度”

其目的是将表单用作基本UI，以帮助生成一些JSON数据

---

谢谢。

我提出的解决方案是使用动态[formGroupName]，它引用一个数组，该数组在每次添加新组时都会更新

[formGroupName]="myGroupName[i]"

app.component.ts：

import { Component, OnInit } from '@angular/core';
import { Customer } from './customer.interface';
import { FormControl, FormBuilder, FormGroup, FormArray, Validators } from '@angular/forms';


@Component({
    moduleId: module.id,
    selector: 'my-app',
    templateUrl: 'app.component.html',
})
export class AppComponent implements OnInit {
    public myForm: FormGroup;

      myGroupName = ['test'];


    constructor(private _fb: FormBuilder) { 
    }

    ngOnInit() {
        this.myForm = this._fb.group({

            myArray: this._fb.array([
                this._fb.group({  
                   test: this._fb.group({
                        name: ['test'],
                            title: [''],
                          link: [''],
                            cta: [''],

                    })
                }), 

            ])
        });
    }


 initArray(nameObj:any) {
      return  this._fb.group({  
                [nameObj]: this._fb.group({
                        name: [nameObj],
                          title: [''],
                        link: [''],
                          cta: [''],

                    })
                })
    }

 addArray(newName:string) {
        const control = <FormArray>this.myForm.controls['myArray'];
        this.myGroupName.push(newName);
        control.push(this.initArray(newName));
            document.getElementById('newName').value='';
    }



  removeDataKey(i: number) {
       const control = <FormArray>this.myForm.controls['myArray'];
       control.removeAt(i);
       this.myGroupName.splice(i,1);
    }

}

从'@angular/core'导入{Component，OnInit}；
从“/Customer.interface”导入{Customer}；
从“@angular/forms”导入{FormControl、FormBuilder、FormGroup、FormArray、Validators}；
@组成部分({
moduleId:module.id，
选择器：“我的应用程序”，
templateUrl:'app.component.html'，
})
导出类AppComponent实现OnInit{
公共myForm:FormGroup；
myGroupName=['test']；
构造函数（私有_fb:FormBuilder）{
}
恩戈尼尼特（）{
this.myForm=this.\u fb.group({
myArray:这个([
这个._fb.group（{
测试：本组({
名称：[“测试”]，
标题：['']，
链接：['']，
cta:['']，
})
}), 
])
});
}
initArray（nameObj:any）{
返回此。\ fb.group（{
[nameObj]：这个({
姓名：[nameObj]，
标题：['']，
链接：['']，
cta:['']，
})
})
}
addArray（新名称：字符串）{
const control=this.myForm.controls['myArray']；
this.myGroupName.push（newName）；
control.push（this.initArray（newName））；
document.getElementById（'newName'）。值=''；
}
removeDataKey（i:编号）{
const control=this.myForm.controls['myArray']；
控制。移除（i）；
this.myGroupName.splice（i，1）；
}
}

app.component.html：

<form [formGroup]="myForm" novalidate (ngSubmit)="save(myForm)">

      <div formArrayName="myArray"> 

         <div *ngFor="let myGroup of myForm.controls.myArray.controls; let i=index" class="panel panel-default">

           <div [formGroupName]="i" class="panel-body"> 
              <span *ngIf="myForm.controls.myArray.controls.length > 1" 
                    (click)="removeDataKey(i)" class="glyphicon glyphicon-remove pull-right">
                </span>
             <h5 >Group {{i + 1 }}</h5>
            <h3>  {{myGroupName[i] }}</h3>

              <!--[formGroupName]="myGroupName[i]"-->
              <div [formGroupName]="myGroupName[i]" class="panel-body"> 


              <div class="form-group">
              <label>Title</label>
              <input type="text" class="form-control" formControlName="title" >
              </div>

              <div class="form-group">
              <label>Link</label>
              <input type="text" class="form-control" formControlName="link" >
              </div> 

              <div class="form-group">
              <label>Cta</label>
              <input type="text" class="form-control" formControlName="cta" >
              </div>


              </div>
              <!--[formGroupName]="myGroupName[i]"-->

        </div>
         <!--[formGroupName]="i" -->
      </div>

    </div>
     <!-- myArray array-->

        <div class="margin-20">

        <input #newName
      (keyup.enter)="addName(newName.value)"
       type="text" style="width:30%" id="newName">


        <a (click)="addArray(newName.value)" style="cursor: default" class="btn">Add Group  +</a>



        </div>
</form>

群{i+1}
{{myGroupName[i]}
标题
链接
Cta
有了相关的plunks
我认为这是可能的，但您需要提供更多信息。例如，您使用什么来呈现表单？HTML？有棱角？当然。我试图保持问题的简单性，因为上次我问了一个问题，我觉得有太多混乱的信息使问题复杂化了。我正在考虑使用angular2表单html组件和ts组件，与此类似，但不是添加到现有数组中，而是每次都需要添加一个新的表单组。我还没有遇到过这样的例子。谢谢