ボタンをクリックが4

Question

角度で、私は動的に
私は角2で同じ問題についてquestionを見つけましたが、私はそれが私のexemple

で作業することはできません入力を追加する可能性を持つフォームを作成したときに動的に入力を追加します。その後、

export class AjoutProjetComponent implements OnInit { 
    isLinear = false; 
    firstFormGroup: FormGroup; 
    secondFormGroup: FormGroup; 

    constructor(private _formBuilder: FormBuilder) {} 

    ngOnInit() { 
     this.secondFormGroup = this._formBuilder.group({ 
      pers: [this._formBuilder.array([this.createItem()])] 
     }); 
    } 
    createItem(): FormGroup { 
     return this._formBuilder.group({ 
      name: ['', Validators.required] 
      poste: ['', Validators.required], 

     }); 
    } 
    addItem(): void { 
     const control = <FormArray> this.secondFormGroup.controls['pers']; 
     control.push(this.createItem()); 
    } 

} 

HTMLファイル

：

は、ここに私のコンポーネントTSファイルです

私の好きなアイコンで私をクリックすると、私はこのエラーを取得：

ERROR TypeError: control.push is not a function at AjoutProjetComponent.addItem 

はどのようにして動的に取り組んで入力し追加することができますか？

UPDATE あなたは正しくFormArrayを宣言していない

ERROR Error: Cannot find control with path: 'pers -> name' 

Answer 1

を、私は2つの入力を印刷することができるように私は私のhtmlコードを更新しましたが、私は自分のコードを実行すると、私は今、このエラーが発生します。あなただけの、シンプルFormControls、ないFormGroupsかFormControlsを初期化するために変更するために配列を使用する：HTMLに動的に追加入力を表示するには

this.secondFormGroup = this._formBuilder.group({ 
     pers: this._formBuilder.array([this.createItem()]) // remove opening and closing brackets 
    }); 

、あなたはngForループを使用する必要があります。私はformArrayNameの使い方を誤解していると思いますが、これはFormArraysと一緒に使用するテンプレートにコンテキストを追加するだけです。このお試しください：

<ng-container formArrayName="pers"> 
    <input placeholder="Address" 
    *ngFor="let control of secondFormGroup.controls.pers.controls" 
    [formControl]="control.controls.name" required /> 
</ng-container> 

をそしてFormArrayNameディレクティブhere