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

这在某种程度上是一个骗局this question，但希望不太复杂。angular2使用输入动态添加到表格模型

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

用户案例：

用户可以通过定义字段中输入一个新的FormGroupName并单击扩展新FormGroup形式，然后填写值是FormGroup的FormControls。

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

2类型“富”到输入字段

3点击“添加数据组”来创建新的FormGroup“富”

4的形式揭示了输入域“高度”和“重量”为新的FormGroup foo。

5用户填写 '高度' 和 '富'

6重复步骤2-5 '酒吧'

7提交 '权重' 值：

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

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

其目的是使用表单作为基本UI来帮助生成一些JSON数据。

谢谢。

来源

2016-08-25 fivedoor

我认为这是可能的，但你需要提供更多的信息。例如。你用什么来渲染表单？ HTML？角？ –

当然可以。我试图保持简单的问题，因为上次我问了一个[类似的问题]（http://stackoverflow.com/questions/38896226/angular2-add-and-submit-a-new-formgroup-name-and-values -with-model-driven-form）我觉得我用复杂的信息弄得太复杂了。我正在考虑使用angular2 form-html组件和ts组件，类似于这个[示例]（https://embed.plnkr.co/sUjE1ULYhfDHLNBw2sRv/1），但不是添加到现有的数组中，而是需要添加一个新的FormGroup每次。我还没有遇到过这样的例子。谢谢 – fivedoor

我想出了解决的办法是使用一个动态[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与相关的短裤

来源

2016-09-21 10:59:29 fivedoor

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

回答

相关问题