Angular 4'te form kontrol dizisindeki değişiklikler nasıl algılanır?

Question

Angular 4 projesinde çalışıyorum. Form kontrol dizisinin değişikliklerini tespit etme ihtiyacım var. Örneğin. Sağlayıcılar adlı bir form kontrol dizim var, bu değişiklikleri nasıl algılayacağım?

export class CustomFormArray { 
public form: FormGroup; 

constructor(private _fb: FormBuilder) { 
     this.form = _fb.group({ 
      providers: _fb.array([]) 
     }); 
    } 
} 

Answer 1

FormArrayAbstractControl böylece Chanes yayar valueChanges özelliği uzanır. Şablonunuzda

this.form = this.fb.group({ 
    providers: this.fb.array([]), 
}); 
(this.form.get('providers') as FormArray).push(new FormControl('', Validators.required)); 
(this.form.get('providers') as FormArray).push(new FormControl('', Validators.required)); 

(this.form.get('providers') as FormArray).valueChanges.subscribe(values => { 
    console.log(values); 
}); 

:

<input *ngFor="let field of form.controls.providers.controls;" [formControl]="field"> 

her giriş alanının değerine sahip bir dizi döndürür abone içinde values zaman değişiklikler (dilbilgisi veya UI) herhangi biri olabilir.

FormGroup'da FormArray olması durumunda hiçbir değişiklik yapılmaz. sadece aşağıdaki bileşen kodunu kullanın.

(this.form.get('providers') as FormArray).push(this.fb.group({ 
     'name': '', 
     'age': '' 
    })); 

ve şablon olacaktır: Burada

<div *ngFor="let field of form.controls.providers.controls;" [formGroup]="field"> 
    <input formControlName="name" placeholder="name"> 
    <input formControlName="age" placeholder="age"> 
</div> 

Bunu tespit etmek için başka bir grup olarak sağlayıcıları dizinin eleman içinde kaydetmeniz gerekir plunker

Answer 2

Normal form grubu için yaptığınız gibi benzer. Form dizinizdeki form grubunu ilk başlattığınızda, sadece form dizinizdeki form grubunuzu değiştirin veya abone olun.

İşte örneklemdir.

export class CustomFormArray { 
    public form: FormGroup; 

    constructor(private _fb: FormBuilder) { 
      this.form = _fb.group({ 
       providers: _fb.array([]) 
      }); 

     this.providers.push(this.createprovidersFormGroup()) 
     } 

    createprovidersFormGroup(){ 
      let form = this._formBuilder.group({ 
         abc: "abc" 


        }); 

       form.valueChanges.subscribe(data => { 
        console.log('Form changes', data) 
       }); 

     return form; 
     }