Sé que la respuesta ya está dada, pero quiero dar una respuesta breve sobre cómo actualizar el valor de un formulario para que otros recién llegados puedan tener una idea clara.
su estructura de formulario es tan perfecta para usarla como ejemplo. entonces, a lo largo de mi respuesta, lo denotaré como la forma.
this.form = this.fb.group({
'name': ['', Validators.required],
'dept': ['', Validators.required],
'description': ['', Validators.required]
});
por lo que nuestra forma es un FormGroup tipo de objeto que tiene tres FormControl .
Hay dos formas de actualizar el valor del modelo:
Use el método setValue () para establecer un nuevo valor para un control individual. El método setValue () se adhiere estrictamente a la estructura del grupo de formularios y reemplaza el valor completo del control.
Use el método patchValue () para reemplazar cualquier propiedad definida en el objeto que haya cambiado en el modelo de formulario.
Las verificaciones estrictas del método setValue () ayudan a detectar errores de anidamiento en formas complejas, mientras que patchValue () falla silenciosamente en esos errores.
De la documentación oficial angular aquí
por lo tanto, al actualizar el valor para una instancia de grupo de formulario que contiene múltiples controles, pero es posible que solo desee actualizar partes del modelo. patchValue () es el que estás buscando.
Veamos un ejemplo. Cuando usas patchValue ()
this.form.patchValue({
dept: 1
});
//here we are just updating only dept field and it will work.
pero cuando usa setValue () necesita actualizar el modelo completo ya que se adhiere estrictamente a la estructura del grupo de formularios. entonces, si escribimos
this.form.setValue({
dept: 1
});
// it will throw error.
Debemos pasar todas las propiedades del modelo de grupo de formulario. Me gusta esto
this.form.setValue({
name: 'Mr. Bean'
dept: 1,
description: 'spome description'
});
pero no uso este estilo con frecuencia. Prefiero usar el siguiente enfoque que ayuda a mantener mi código más limpio y más comprensible.
Lo que hago es declarar todos los controles como una variable separada y usar setValue () para actualizar ese control específico.
para el formulario anterior, haré algo como esto.
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;
}
cuando necesite actualizar el control de formulario, simplemente use esa propiedad para actualizarlo. En el ejemplo, el interlocutor intentó actualizar el control de formulario del departamento cuando el usuario selecciona un elemento de la lista desplegable.
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.
}
Sugiero echar un vistazo a la API FormGroup para conocer todas las propiedades y métodos de FormGroup.
Adicional : para conocer getter ver aquí