0

Necesito rellenar el formulario con los datos del usuario para poder editarlos, pero no se como hacerlo.

Este es el formulario.

 this.formEditarUser = this._builder.group({
  name: ['', Validators.required],
  cpostal: ['', Validators.required],
  provincia: ['', Validators.required],
  localidad: ['', Validators.required],
  pais: ['', Validators.required],
  surname: ['', Validators.required],
  imagen: [''],
});

Intente meterlo en la funcion que me trae los datos del usuario, pero da error, e intento rellenarlo con una funcion a parte pero tampoco se rellena.

rellenarFormuluario() {

this.formEditarUser.value.name.setValue(this.nombre);

}

Solo se visualiza en el formulario si lo hago directamente en el constructor.

Aquí le asigno el nombre a la variable

getUserEditar() {
this._serviceUser.edit(this.idUserConectado).subscribe(
  response => {
    this.user = response;
    this.nombre = response.name;
    this.rellenarFormuluario();
    console.log(this.formEditarUser.value.name);
  }
);

}

4
  • puedes poner lo que tiene la variable this.nombre?
    – hawks
    el 20 may. 2020 a las 7:19
  • ya lo modifique le asigno el nombre que me trae el response, aunque se lo ponga manualmente tampoco funciona.
    – alV1997
    el 20 may. 2020 a las 7:38
  • quieres rellenar todos los campos del formulario o solo el name? Es que no queda claro
    – hawks
    el 20 may. 2020 a las 7:45
  • Todos los campos, pero antes quería conseguirlo con uno, antes de hacer los demas.
    – alV1997
    el 20 may. 2020 a las 7:58

1 respuesta 1

1

Para rellenar los campos de un formulario reactivo angular te provee dos métodos patchValue y setValue. Aquí la documentación.

patchValue actualiza todos los campos que encuentre en el modelo que le pases como parámetro. Sino encuentra un campo no tira ningún error.

setValue es más estricto a la hora de actualizar los valores, es decir, valida que el modelo tenga la misma estructura y propiedades que los campos del formulario. Si falta alguno tira error.

Imagina que en tu caso quieres actualizar solo los campos name y cpostal.

Si usas patchValue la actualización no te dará error.

this.formEditarUser.patchValue({ name: 'mi nombre', cpostal: 'abcd12'});

Pero con setValue te dará error porque te faltan pasar los campos que no se actualizan.

this.formEditarUser.setValue({ name: 'mi nombre', cpostal: 'abcd12'}); // dará error

Para actualizar todos los campos del formulario

rellenarFormuluario() {
   this.formEditarUser.patchValue(this.user);
   // this.formEditarUser.setValue(this.user); esto depende de ti si quieres que tenga una validación estricta o no. 
}

Actualiar campo individual

// haces el get del campo que quieres actualizar y haces el update del valor con patchValue o setValue. 
this.formEditarUser.get('name').patchValue(this.nombre);
1
  • Muchas gracias!
    – alV1997
    el 20 may. 2020 a las 8:21

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.