web-dev-qa-db-fra.com

Comment mettre à jour les contrôles de FormArray

Mon code de groupe de formulaires est le suivant:

this.myForm = this._fb.group({            
            branch_name: ['', [Validators.required]],
            branch_timing: this._fb.array([
                this.initBranchTiming(),
            ])                                
        });

initBranchTiming() {       
        return this._fb.group({
            day: ['', []],
            open_from: ['00:00:00', []],
            open_till: ['00:00:00', []]           
        });
  }

branch_name est mis à jour par ce code 

(<FormControl>this.myForm.controls['branch_name']).updateValue(this.branch_detail.branch_name);

Maintenant, je dois mettre à jour le champ 'jour' du tableau de formulaire. que faire pour mettre à jour le champ 'jour' du tableau de formulaire branch_timing?

angularangular2-forms
14
Mubashir

Autant que je sache, placer une FormGroup à l'intérieur d'une FormArray supprime les 'contrôles de formulaire' de leurs noms et en fait une liste, comme un tableau normal.

Afin de mettre à jour la FormControls individuellement, vous mettez à jour la valeur de chaque AbstractControl à partir de la FormGroup en utilisant l'index:

let index = 0; // or 1 or 2
(<FormArray>this.myForm.controls['branch_timing']).at(index).patchValue('example');

Ou vous pouvez mettre à jour toute la FormArray en appelant setValue ou patchValue:

(<FormArray>this.myForm.controls['branch_timing']).setValue(['example', 'example1', 'example2']);

setValue nécessite un tableau qui correspond à la structure entière ou à la FormArray, alors que patchValue peut prendre un super-ensemble ou un sous-ensemble du tableau. ( FormArray-class sur le site web de Angular2 )

9
Federico Pettinella

Vous pouvez le faire simplement en créant un nouveau FormControl:

this.form.setControl('items',  new FormControl(arrayItemsValue));

Ou en supprimant tous les éléments avant de les mettre à jour:

const items = (<FormArray>this.form.get('items'));
 for (let i = 0; i < items.length; i++) {
     items.removeAt(i);
 }
 this.form.get('items').setValue(arrayItemsValue);
1
abahet

Ceci est testé et fonctionne sur Angular 2.0.0-rc.4 avec @ angular/forms 0.2.0:

(<FormControl>this.myForm.controls.branch_timing.controls[0].controls.day)
  .updateValue('new value');

Dans la version 2.0, Angular 2.0.0 avec @ angular/forms 2.0.0, la syntaxe a été simplifiée:

this.myForm.value.branch_name = this.branch_detail.branch_name;

et

this.myForm.value.branch_timing[0].day = 'New Value';
0
DSchnellDavis