Jak wykrywać zmiany w tablicy kontrolnej formularza w Angular 4?

Question

Pracuję nad projektem Angular 4. Mam wymóg wykrywania zmian w macierzy kontroli formularzy. na przykład Mam tablicę kontroli formularzy o nazwie provider, jak wykrywać jej zmiany?

export class CustomFormArray { 
public form: FormGroup; 

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

Answer 1

FormArray rozciąga AbstractControl więc ma valueChanges właściwość, która emituje Chanes.

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); 
}); 

W szablonie:

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

values w subskrybować zwróci tablicę z wartości każdego pola wejściowego gdy którykolwiek zmian (gramatycznie lub UI).

W przypadku, gdy są FormGroup w FormArray nic się nie zmienia. po prostu użyj następującego kodu komponentu.

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

i szablon będzie:

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

tutaj jest plunker

Answer 2

Jest podobny, jak w przypadku zwykłej grupy formularzy. Za każdym razem, gdy inicjujesz grupę formularzy w swojej macierzy, po prostu wyślij/zapisz zmiany w swojej grupie formularzy.

tutaj jest próbka.

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; 
     }