Angular2 reaktif formlar: FormArray ile üst FormHroup eşitleme

Question

Değişken uzunluklarda nesne dizileriyle ilgilenmek için FormArrays kullanıyorum. Benim mevcut uygulama çoğunlukla çalışır iken, benim validade yapılan herhangi bir değişiklik kendi "ana" FormGroup ... veya en azından otomatik olarak değil, FormGroup olabilir olabilir FormGroup tarafından yönetilen başka bir kontrolün değerini değiştirerek güncellendi.

Bu noktada, uygulamamın yanlış bir şey olup olmadığını anlayamıyorum, ya da bir şey beklemem gerekiyorsa yapmam gerekmiyor ... Sonunda "sorun" ne olursa olsun, memnuniyetle yaparım bu noktada herhangi bir giriş yapın. Plunker için

Bağlantı: https://plnkr.co/edit/PLslyJo1YOszGwTpujyx

Plunker içinde app.ts üstündeki açıklama sorunu yeniden oluşturmaya adımları ayrıntılı (Açısal sürümü 2.0.1 ise) (veya bir problem nedir bana, yine de). Plunker bağlarken

olarak SO bazı kodunu sorar, burada bu Plunker belirtilmiştir

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 ve FormArray tanımına ilişkin hatları vardır, ama burada da bahsetmek diye FormArray ait valueChanges abone yardımcı görünmüyor (veya belki benim abonelik içine doğru olanı yapmadı): :)

yılında şıngırdayan herkese

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

Teşekkür

DÜZENLEME (2016-10-11): valueChanges kanca ile oynamak, biraz daha sorunu çözmeme izin verdi, ancak tatmin edici olmayan bir çözümle. Bu nedenle, kendi sorumu cevaplamak yerine düzenlemeyi yapıyorum, ancak herhangi bir mod bunun geçerli bir sonuç olduğunu düşünürse, her durumda lütfen uygun bulduğunuz şeyi yapın. Benim "çözüm" gelince

: yerine FormArray veya kök FormGroup düzeyinde valueChanges abone arasında, neredeyse ben FormArray oluşturmak her FormGroup gözlemlenebilir valueChanges abone olarak ne istediğini elde edebiliriz:

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; 

Bunu yaparak, FormArray değiştirildiğinde, ancak bir gecikme ile kök FormGroup güncellenir. Örneğin, A alanında "123" yazarsam, kök FormGroup değeri "fieldA":"12" içerir.

Bu nedenle, benim "tatmin edici" çözümüm: abonelikte bir küme setTimeout ekleyerek, root FormGroup tam olarak istediğim şekilde güncelleştirir ... ideal olarak bir setTimeout'a gerek yoktur.

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

SetTimeout'a başvurmadan bunu yönetmenin herhangi bir yolu var mı?

updated Plunker: https://plnkr.co/edit/7mbTNPHjRhlU3ostf3av

Answer 1

bunu ilgili değil, senin plunker ile biraz oynadı ve bunun boyutunu değiştirdikten sonra yeni FormArray atanan zaman, tek başına atanan

sorunu öğrendim FormGourp numaralı telefona doğru şekilde.
this.form.controls[<controlName>] = new FormControl/ FormArray/ FormGroup; kullanımı, parent özelliğini yeni kontrole uygulamaz.
Bu nedenle, üst alanlardan birini güncellerken tüm form değerini "yeniledik" olana kadar değerler üst öğeye yayılmadı.

plunker'da daha iyi anlamanız için bazı console.log s ekledim.

Ayrıca, someArray FormArray öğesinin değerini değiştirmek için doğru şekilde (bence) ekledim.
official documentation kullanımı çok yardımcı oldu.

Yardım bu yardımcı olur