Home / Questions / 557778
Accepted
oscarggh
Asked: 2022-09-20 09:43:45 +0800 CST 2022-09-20 09:43:45 +0800 CST

Show data in input text according to the selection of a dropdown

  • 772

I have another problem here guys.

I have the following code which shows some data from an api in a dropdown, so far so good. What I want is that when an item is selected from that dropdown, that is, the name of a user, I fill in the fields below, which is name, paternal and maternal names, telephone and email.

My dropdown:

<label>Usuario</label>
<p-dropdown [options]="SelectUsuarios" [(ngModel)]="id_usuario" optionLabel="nombre" placeholder="Seleccione usuario" optionValue="id_usuario">
<ng-template let-user pTemplate="item">
    <div class="flex align-items-center">
         <span>{{user.apellido_paterno}} {{user.apellido_materno}} / {{user.nombre}}</span>
    </div>
</ng-template>
</p-dropdown>

and the inputs are name, paternal and maternal surname, telephone and mail:

<div class="field col-12 md:col-4">
                    <label class="font-bold">Nombre(s)</label>
                    <input type="text" disabled pInputText [(ngModel)]="nombre"/>
                </div>
javascript

1 Answers

  1. Best Answer

    You can create a method and then call it in the change event of the dropdown:

    nombre:string;
apellido:string;
telefono:string;
correo:string

setUserData(user)
{
 this.nombre = user.nombre;
 this.apellido = user.apellido;
 this.telefono = user.telefono;
 this.correo = user.correo;
}
    • 1