Je sais que la réponse est déjà donnée, mais je veux donner une brève réponse sur la façon de mettre à jour la valeur d'un formulaire afin que d'autres nouveaux arrivants puissent avoir une idée claire.
votre structure de formulaire est si parfaite pour l'utiliser comme exemple. donc, tout au long de ma réponse, je la désignerai comme la forme.
this.form = this.fb.group({
'name': ['', Validators.required],
'dept': ['', Validators.required],
'description': ['', Validators.required]
});
donc notre formulaire est un FormGroup type d'objet qui a trois FormControl .
Il existe deux façons de mettre à jour la valeur du modèle:
Utilisez la méthode setValue () pour définir une nouvelle valeur pour un contrôle individuel. La méthode setValue () adhère strictement à la structure du groupe de formulaires et remplace la valeur entière du contrôle.
Utilisez la méthode patchValue () pour remplacer toutes les propriétés définies dans l'objet qui ont changé dans le modèle de formulaire.
Les contrôles stricts de la méthode setValue () aident à détecter les erreurs d'imbrication dans des formulaires complexes, tandis que patchValue () échoue silencieusement sur ces erreurs.
De la documentation officielle Angular ici
Ainsi, lors de la mise à jour de la valeur d'une instance de groupe de formulaires qui contient plusieurs contrôles, mais vous souhaiterez peut-être uniquement mettre à jour des parties du modèle. patchValue () est celui que vous recherchez.
voyons l'exemple. Lorsque vous utilisez patchValue ()
this.form.patchValue({
dept: 1
});
//here we are just updating only dept field and it will work.
mais lorsque vous utilisez setValue (), vous devez mettre à jour le modèle complet car il adhère strictement à la structure du groupe de formulaires. alors, si nous écrivons
this.form.setValue({
dept: 1
});
// it will throw error.
Nous devons transmettre toutes les propriétés du modèle de groupe de formulaires. comme ça
this.form.setValue({
name: 'Mr. Bean'
dept: 1,
description: 'spome description'
});
mais je n'utilise pas ce style fréquemment. Je préfère utiliser l'approche suivante qui aide à garder mon code plus propre et plus compréhensible.
Ce que je fais, c'est que je déclare tous les contrôles comme une variable séparée et j'utilise setValue () pour mettre à jour ce contrôle spécifique.
pour le formulaire ci-dessus, je vais faire quelque chose comme ça.
get companyIdentifier(): FormControl {
return this.form.get('name') as FormControl;
}
get dept(): FormControl {
return this.form.get('dept') as FormControl;
}
get description(): FormControl {
return this.form.get('description') as FormControl;
}
lorsque vous devez mettre à jour le contrôle de formulaire, utilisez simplement cette propriété pour le mettre à jour. Dans l'exemple, l'interrogateur a essayé de mettre à jour le contrôle de formulaire de service lorsque l'utilisateur sélectionnait un élément dans la liste déroulante.
deptSelected(selected: { id: string; text: string }) {
console.log(selected) // Shows proper selection!
// instead of using this.form.controls['dept'].setValue(selected.id), I prefer the following.
this.dept.setValue(selected.id); // this.dept is the property that returns the 'dept' FormControl of the form.
}
Je suggère de jeter un œil à l' API FormGroup pour connaître toutes les propriétés et méthodes de FormGroup.
Supplémentaire : pour en savoir plus sur getter voir ici