Angular2反応形式：親FormGroup

Question

と同期FormArray私は、可変長のオブジェクト配列に対処するFormArraysを使用しています。私の現在の実装は、主に動作しますが、それは検証に来るとき、私FormArrayへの変更は、その「親」FormGroupに伝播されていない...または少なくとも自動的FormGroup の値はすることができないので、私は、問題を抱えています前記FormGroupによって管理される別のコントロールの値を変更することによって更新される。この時点で

、私の実装に問題がある場合、私は言うことができない、または私はいけない何かを期待していた場合...「問題」が終了しているものは何でも、私は喜んでよこの時点で入力を取得します。 Plunkerへ

リンク：https://plnkr.co/edit/PLslyJo1YOszGwTpujyx （角バージョンは2.0.1です）

Plunkerでapp.tsの一番上にコメントが問題を再現する手順の詳細を（あるいは問題が何でありますかとにかく、私に）。 Plunkerにリンクする際

がなるようにいくつかのコードを要求し、ここでこれはPlunkerに記載されている

this.form = this.fb.group({ 
     "size":[0, Validators.required], 
     "someArray": this.fb.array(this.initFormArray(0), Validators.required), 
     "someOtherField":[null] 
}); 

initFormArray(size:number):FormGroup[]{ 
    let newFormArray:FormGroup[] = [] ; 

    for(let i = 0 ; i < size ; i++){ 
    newFormArray.push(this.fb.group({ 
     fieldA: [null, Validators.required], 
     fieldB: [null, Validators.required] 
    })); 
} 

    return newFormArray; 
} 

updateFormArray(value:string){ 
    let newSize:number = parseInt(value) ; 

    if(newSize >= 0){ 
    this.form.controls["someArray"] = this.fb.array(this.initFormArray(newSize)) 
    this.form.updateValueAndValidity(); 
    } 
} 

FormGroupとFormArrayの定義に関係する線ですが、私はここにも言及するかもしれませんFormArrayのvalueChangesに加入することを支援していないようです（または多分私は私のサブスクリプション内の正しいことをしませんでした）：:)

に鳴る誰に

this.form.controls['someArray'].valueChanges.subscribe((data) => this.form.updateValueAndValidity()); 

感謝を

EDIT（2016年10月11日）：いくつかのより多くのvalueChangesフックで遊んではなく、不十分な溶液で、事実上の問題を解決するために私を可能にしました。このような理由から、私は編集ではなく、自分の質問に答えるが、どのmodは、これはすべての手段によって、有効な結論であると考える場合は、十分な考える何をしてくださいよ。私の「解決策」については

：代わりにFormArrayまたはルートFormGroupレベルでvalueChangesに加入すると、私はほとんど私がFormArrayを構成する各FormGroupのvalueChanges観測可能に加入することにより、欲しかったものを達成できます。

initFormArray(size:number):FormGroup[]{ 
    let newFormArray:FormGroup[] = [] ; 

    for(let i = 0 ; i < size ; i++){ 
    let formGroup = this.fb.group({ 
     fieldA: [null, Validators.required], 
     fieldB: [null, Validators.required] 
    }) ; 

    formGroup.valueChanges.subscribe((data) => this.form.updateValueAndValidity()); 
    newFormArray.push(formGroup); 
    } 

return newFormArray; 

そうすることによって

}

、ルートFormGroupがFormArrayが変更されたときに更新されますが、遅れを持ちます。たとえば、フィールドAに "123"を入力すると、ルートFormGroup値には"fieldA":"12"が含まれます。

私の不満足な "解決策"：サブスクリプションにダミーのsetTimeoutを追加することで、ルートFormGroupが正確に更新されます。理想的にはsetTimeoutは必要ありません。

formGroup.valueChanges.subscribe((data) => setTimeout(()=>this.form.updateValueAndValidity(), 1); 

setTimeoutを使用せずにこれを管理する方法はありますか？

更新Plunker：https://plnkr.co/edit/7mbTNPHjRhlU3ostf3av

Answer 1

私はあなたのplunkerで多少演奏し、問題を発見

をあなたはそれのサイズを変更した後、新たなFormArrayを割り当てられた場合、あなたは一人でそれを割り当てられ、それを関係ありません親に正確にFormGourp。
this.form.controls[<controlName>] = new FormControl/ FormArray/ FormGroup;を使用すると、新しいコントロールにparentプロパティが適用されません。
親フィールドの1つを更新するときにフォーム値全体を「リフレッシュ」するまで、値は親に伝播しませんでした。

plunkerには、console.logが追加されています。

また、私の意見では、someArray FormArrayの値を置き換える正しい方法を追加しました。
official documentationを使用すると多くの手助けをしました。

希望します。