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

Question

这在某种程度上是 this question 的欺骗，但希望不那么复杂。

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

用户案例：

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

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

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

3 点击“添加数据组”创建新的FormGroup 'foo'

4 表单显示新 FormGroup 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 数据。

谢谢。

Answer 1

我想出的解决方案是使用一个动态的 [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);
    }

}

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>

这个问题的骗子也回答了here与相关的plunks