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使用輸入動態添加到表格模型

回答

相關問題