web-dev-qa-db-fra.com

Comment détecter les modifications du tableau de contrôle de formulaire dans Angular 4?

Je travaille sur le projet Angular 4. J'ai besoin de détecter les changements de tableau de contrôle de forme. par exemple. J'ai un tableau de contrôle de formulaire nommé fournisseurs, comment détecter ses modifications?

export class CustomFormArray {
 public form: FormGroup;

 constructor(private _fb: FormBuilder) {
      this.form = _fb.group({
           providers: _fb.array([])
      });
  }
}
angularangular4-forms
8
Tarnjeet Singh

FormArray étend AbstractControl afin qu'il ait la propriété valueChanges qui émet des 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);
});

Dans votre modèle:

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

La variable values dans subscribe renverra un tableau avec la valeur de chaque champ d'entrée lorsque l'un des changements change (de manière grammaticale ou à partir de l'interface utilisateur).

S'il y a FormGroup dans FormArray, rien ne change. utilisez simplement le code de composant suivant.

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

et le modèle sera:

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

voici plunker

8
user1533603

Est similaire à la façon dont vous le faites pour un groupe de forme normale. Chaque fois que vous initialisez un groupe de formulaires de votre tableau de formulaires, il vous suffit d’émettre/abonner un événement de changement à votre groupe de formulaires de votre tableau de formulaires.

voici l'échantillon.

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