アンギュラ4ネストされたフォームの更新

Question

'questions'のネストされたフォームグループ要素は、key：valueというランダムな長さのオブジェクトです。

私は要素を通過するには、以下のngForを使用しています：私は最初の2つのフォームレベルのフィールドのいずれかを更新していた場合 は、私はすぐに見ることができる：

<tr *ngFor="let questionConfigForm of myForm.controls.questions.controls; let i=index" [formGroupName]="i"> 
... 
    <div *ngFor="let param of objectKeys(questionConfigForm.controls.params.controls)" formGroupName="params"> 
     <input type="text" [formControlName]="param"> 

は、私は、次の行動を持っています対応するフォームの変更は、{{myForm.value | json}}。 しかし、私が 'params'コントロールの1つに何かを入力すると、myFormの値に変更は見られませんでしたが、 'params'コントロールのフォームデータは、対応する 'question'フォームで変更すると更新されます。

私の場合、フォームコントロールは入力データを受け取りますが、いくつかの更新イベントをトリガーしません。私はそれを修正する方法はわかりません。フォーム内のpatchValue ..

私の質問は、paramsコントロールがmyFormをその奇妙な動作なしで更新する方法です。

UPD：

initQuestionConfig() { 
    return this.fb.group({ 
     priority: ['1'], 
     params: this.fb.group({parameter: ['']}), 
    }); 
} 

addQuestionConfig() { 
    const control = <FormArray>this.myForm.controls['questions']; 
    const newQuestionCfg = this.initQuestionConfig(); 
    control.push(newQuestionCfg); 
} 

Answer 1

これを試してみてください：

<div formArrayName="testGroup"> 
      <div *ngFor="let test of testGroup.controls; let i=index"> 
       <div [formGroupName]="i"> 
        <div class="well well-sm"> 
         &nbsp;&nbsp;<label> 
          <input type="checkbox" formControlName="controlName" />         
        </div> 
       </div> 
      </div> 
     </div> 

Answer 2

最後に、問題が解決されています...以下のようにformArrayNameとformGroupNameを与えます。

この問題の根源は、すでに存在する「params」をクリーンアップした方法でした。

const control = <FormArray>this.myForm.controls['questions']; 
control.controls[index]['controls'].params = this.fb.group([]); 

そして、それらの不具合の理由は、この新しい「fb.group」インスタンスだった：私は、次のコードを使用「質問」からのすべてのパラメータを削除するには

。

は、今私は、のparamsを一つずつ取り除い元formGroupインスタンスを維持し、期待どおりに動作しますよ。もう一度お時間を

const control = <FormArray>this.myForm.controls['questions']; 
     const paramNames = Object.keys(control.controls[index]['controls'].params.controls); 
     for (let i = 0; i < paramNames.length; i++) { 
      control.controls[index]['controls'].params.removeControl(paramNames[i]); 
     } 

@MilanRaval感謝:)