Question

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

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

用户案例：

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

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

2在输入字段中输入'foo'

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

4表单显示新FormGroup foo的'height'和'weight'的输入字段。

5用户填写'foo'

的'height'和'weight'值

6对'bar'重复步骤2-5

7提交：

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

添加的FormGroup中的FormControl将始终保持一致。因此，在上面的示例中，总是“重量”和“高度”。

目的是将表单用作基本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与相关的掠夺

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

1 个答案: