Comment mettre à jour les contrôles de FormArray
mon code de groupe de forme est comme
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' day ' du tableau de formes. que faire pour mettre à jour le champ 'day' du tableau de formes branch_timing ?
4 réponses
autant que je sache mettre un FormGroup à l'intérieur d'un FormArray supprime les' FormControls ' de leurs noms et en fait juste une liste, comme un Tableau normal.
afin de mettre à jour le FormControls individuellement, vous mettez à jour la valeur de chaque AbstractControlFormGroup 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 l'ensemble de l' 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 au FormArray, alors que les patchValue peut prendre un super-ensemble ou d'un sous-ensemble de la matrice. (FormArray de classe sur Angular2 du site)
ceci est testé et fonctionne sur Angular 2.0.0-rc.4 avec @angulaire, formes 0.2.0:
(<FormControl>this.myForm.controls.branch_timing.controls[0].controls.day)
.updateValue('new value');
dans la version release, 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';
Vous pouvez le faire simplement en créant un nouveau FormControl :
this.form.setControl('items', new FormControl(arrayItemsValue));
Ou par la suppression de 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);
l'Essayer, j'espère qu'elle va travailler pour vous:
this.myForm.controls.splice(0);