asignar value a FormControl

Question

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;
   }
}

angular formularios html5

Ricardo Cayetano · Answer

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);
        },
        () => {}
     );
}

asignar value a FormControl

One Answer

Add your own answers!

Ask a Question