0

Tengo un formulario donde necesito imprimir lo que recibo del servicio en los imput usando formControlName.

<form [formGroup]="VendedorForm">
     <input type="text" formControlName="nombres">
     <input type="text" formControlName="apellidos">
     <input type="text" formControlName="identidad">
</form>

Este es mi servicio el cual asigno a una variable, pero necesito asignar es a VendedorForm

this.VendedorForm = this.formBuilder.group({
  nombres: ['', [Validators.required]],
  apellidos: ['', [Validators.required]],
  identidad: ['', [Validators.required]]
});           

getVendedor() {
   this.vendedorService.getVendedor(this.id)
   .subscribe((response) => {
     this.vendedor = response;
   }
}

1 respuesta 1

2

Veo que usas un formulario reactivo 'VendedorForm' donde mostraras la información.

La función 'getVendedor' cacha los datos devueltos del servicio. Hay de dos:

1.- Crear el formulario con el valor en los campos incializados.

private getVendedor = (): void => {
    this.vendedorService.getVendedor(this.id).subscribe(
        (response: any) => {
            // aqui cacha el valor del objeto que te interesa, reemplaza 'response.body.data' por el tullo
            this.initForm(response.body.data);
        },
        (error: any) => {
            console.log(error);
        },
        () => {}
     );
}
private initForm = (_data: any): void => {
    this.VendedorForm = this.formBuilder.group({
        nombres: [_data.nombres, [Validators.required]],
        apellidos: [_data.apellidos, [Validators.required]],
        identidad: [_data.identidad, [Validators.required]]
    });
}

2.- Usar 'setValue' para asignarle el valor a cada campo del formulario.

private getVendedor = (): void => {
    this.vendedorService.getVendedor(this.id).subscribe(
        (response: any) => {
            // aqui cacha el valor del objeto que te interesa, reemplaza 'response.body.data' por el tullo
            this.VendedorForm.controls['nombres'].setValue(response.body.data.nombres);
            this.VendedorForm.controls['apellidos'].setValue(response.body.data.apellidos);
            this.VendedorForm.controls['identidad'].setValue(response.body.data.identidad);
        },
        (error: any) => {
            console.log(error);
        },
        () => {}
     );
}
3
  • Luis, veo que usas setValue para asignar los valores obtenidos del servicio al formulario, esto es tedioso si el objeto o el formulario tienen muchos campos, antes, en angularjs y con ngmodel, el objeto obtenido del servicio (de la bd) se lo asignabas y listo, ya estaba cargado el formulario, no hay alguna forma de cargar esos values solo con asignar el objeto?saludos
    – Cribelo
    el 26 sep. 2020 a las 16:17
  • Hola Cribelo, en este caso estamos usando formularios reactivos (Reactive forms), la otra opción que nos ofrece angular es formularios basados en plantillas (Template-driven form) es similar a lo que estas buscando y como se manejaba en angularjs, esta opción es mas sencillo de usar, consiste en enlazar los datos (data binding) desde el componente(código typescript) hasta la plantilla(código html) a través de la sintaxis [(nombreDeVariable)] en cada elemento html a enlazar. Aquí un enlace con la comparativa: paradigmadigital.com/dev/… el 1 oct. 2020 a las 3:27
  • Hola Ricardo, si conozco esa forma de validacion, usa data binding, pero, las validaciones son mas dificiles de configurar, tanto en el html como en el ts, con formularios reactivos esa configuración es mas fácil.Al final lo solucioné, o a medias es usar this.form.patchValue(this.unrecurso); Eso asigna el objeto al formulario, saludos
    – Cribelo
    el 1 oct. 2020 a las 13:24

Tu Respuesta

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

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