Búsqueda de sitios web

angular - Establecer el valor del dropdown de primeng en un formulario dirigido por modelo

Estoy tratando de completar un formulario que tiene algunos menús desplegables de PrimeNg. Para mayor simplicidad, permítanme usar un ejemplo similar al que está en su sitio web.

<form [formGroup]="myFormGroup">
  <p-dropdown [options]="cities" formControlName="selectedCity"></p-dropdown>
</form>

this.cities = [
  {name: 'New York', code: 'NY'},
  {name: 'Rome', code: 'RM'},
  {name: 'London', code: 'LDN'},
  {name: 'Istanbul', code: 'IST'},
  {name: 'Paris', code: 'PRS'}
];

Entonces supongamos que un usuario de la tabla con sus viajes selecciona una fila para editar. Corresponde a algún objeto complejo, que contiene una propiedad Ciudad. Necesitamos seleccionar programáticamente, digamos Roma, en ese menú desplegable en el formulario.

Intenté hacer:

this.myFormGroup.get("selectedCity").setValue('Rome');

intentó :

this.myFormGroup.get("selectedCity").patchValue('Rome');

intenté agregar a html:

optionLabel="name"

Nada se selecciona.

¿Algún consejo sobre cómo hacerlo correctamente?

Supongo que no debo agregar

[(ngModel)]="selectedCity"

y hacer:

this.selectedCity='Rome';

Usando Angular6 y PrimeNG 6.1.2.

Respuesta #1

En primer lugar, debe quedar claro que; sea lo que sea que contenga el arreglo options, son los valores asignados al FormControl.

En este caso, los valores del control del formulario son objetos de ciudad porque el array cities contiene objetos.

Para establecer el valor de un control de formulario de manera programática, el valor debe ser uno de los elementos del array options.

Entonces, si quieres establecer Istanbul como seleccionado, debes configurar exactamente el mismo objeto del arreglo cities (particularmente, cities[3])

Se puede hacer de esta manera;

this.myFormGroup.get("selectedCity").setValue(this.cities.find(city => city.name === "Istanbul"));

Como nota al margen, optionLabel="name" solo indica qué campo de los objetos ciudad usar como valor de visualización, eso es todo.

Aquí hay una demostración: https://stackblitz.com/edit/angular-6-template-6yu6jz

Artículos relacionados