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

angular2 using input to dynamically add to form model

本文关键字：表单 模型 添加 动态 输入 Angular2      更新时间：2023-09-26

这在某种程度上是对这个问题的欺骗，但希望不那么复杂。

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

用户案例:

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

1用户正常填写现有的"name"字段。

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

3点击' add data group '创建新的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"
   }
}

添加的FormGroups中的FormControls将始终保持一致。因此，在上面的例子中，总是' weight '和' height '。

目的是使用表单作为基本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);
    }
}

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>

这个问题的问题在这里也有相关的答案

相关文章：