無法使用formArray動態複製控件

Question

我試圖使用FormArray完成動態複製，但我無法做到。請檢查JSFiddle上的表格。

component.html

<div class="form-group"> 
    <div formArrayName="nqCoordinators"> 
    <button class="col-md-offset-1 col-md-1 btn btn-default" type="button"> 
     Add Coordinator 
    </button> 
    <div class="form-group" [ngClass]="{'has-error': (agencyForm.get('nqCoordinators').touched || agencyForm.get('nqCoordinators').dirty) && !agencyForm.get('nqCoordinators').valid}" 
     *ngFor="let nqCoordinator of nqCoordinators.controls; let i=index"> 
     <label class="col-md-2 control-label" [attr.for]="i">Coordinator</label> 
     <div class="col-md-8"> 
     <input class="form-control" id="i" type="text" placeholder="NQ Coordinator" formControlName="i" /> 
     </div>    
    </div> 
    </div> 
</div> 

component.ts

import { 
    Component, 
    OnInit 
} 
from '@angular/core'; 
import { 
    FormGroup, 
    FormControl, 
    FormBuilder, 
    Validators, 
    FormArray 
} 
from '@angular/forms'; 
import { 
    ActivatedRoute, 
    Router 
} 
from '@angular/router'; 
import { 
    Subscription 
} 
from 'rxjs/Subscription'; 


@Component({ 
    templateUrl: './newq.component.html' 
}) 
export class CreateNewQComponent implements OnInit { 
    pageTitle: string; 

    agencyForm: FormGroup; 


    private sub: Subscription; 
    get nqCoordinators(): FormArray { 
    return <FormArray>this.agencyForm.get('nqCoordinators'); 
    } 

    constructor(private route: ActivatedRoute, private fb: FormBuilder, private router: Router) {} 

    //myOptions: IMultiSelectOption[] = [ 
    // { id: 1, name: 'Option 1' }, 
    // { id: 2, name: 'Option 2' }, 
    //]; 

    ngOnInit(): void { 
     this.agencyForm = this.fb.group({ 
     nqCoordinators: this.fb.array([]), 
     //qAdvisors: '', 
     nq1: '', 
     nq2: '', 
     nq3: '', 
     nq4: '', 
     nqCoordinators: this.fb.array([]), 
     nqStartDate: ''   
     }); 

     this.agencyForm.controls['salesRep'].valueChanges 
      .subscribe((selectedOptions) => { 
       // changes 
      }); 
     this.sub = this.route.params.subscribe(
     params => { 
      let id = +params['id']; 
      if (id === 0) 
      this.pageTitle = 'Add Q'; 
      else 
      this.pageTitle = 'Edit Q'; 
     } 
    ); 

    } 

    add() { 
    console.log(this.newQForm); 
    console.log('Saved: ' + JSON.stringify(this.newQForm)); 
    } 

    addAgency() { 
    console.log(this.newQForm); 
    console.log('Saved: ' + JSON.stringify(this.newQForm)); 
    } 

    backBtnClick() { 
    this.router.navigate(['/newq']); 
    } 
} 

Answer 1

你有很多的代碼存在，所以這裏是一個簡單的例子。

首先，你有一個嵌套的<form>標籤。這不僅僅是工作。相反，您應該在模板中只有一個主要的[formGroup]（帶有表單標籤）。其餘的模板應該是formControlName的。 FormArrayName和嵌套FormGroupName's。

所以這裏會形式，在那裏我們有一個協調最初設定的構建：

this.agencyForm = this.fb.group({ 
    agencyName: [''], 
    nqCoordinators: this.fb.array([ 
    this.initNqCoordinators() // we'll use the same function for adding new 
    ]) 
}); 

initNqCoordinators() { 
    return this.fb.group({ 
    // here add all your form controls needed for your coordinator 
    whatever_form_control: [''] 
    }) 
} 

，在這裏，當你模板單擊添加一個新的協調，它是這樣的：

addCoordinator() { 
    // our formarray with coordinators 
    const control = <FormArray>this.agencyForm.controls['nqCoordinators']; 
    // we call function to push a new formgroup to the array 
    control.push(this.initNqCoordinators()) 
} 

然後你的模板應該是這樣的：

<form [formGroup]="agencyForm" (ngSubmit)="submit(agencyForm.value)"> 
    <label>Agency Name: </label> 
    <input formControlName="agencyName"/><br><br> 
    <button (click)="addCoordinator()">Add Coordinator</button><br> 

    <div formArrayName="nqCoordinators"> 
    <div *ngFor="let child of agencyForm.controls.nqCoordinators.controls; let i = index" > 
     <div formGroupName="{{i}}"> 
      <label>Whatever Coordinator formControl-name</label> 
      <input formControlName="whatever_form_control" /><br><br> 
     </div> 
    </div> 
    </div> 
    <button type="submit">Submit</button> 
</form> 

A DEMO同上。