angular - Sätt värdet på primeng-dropdown i modellstyrd formulär

Jag försöker fylla i ett formulär som har några PrimeNg-rullgardinsmenyer. För enkelhets skull låt mig använda ett exempel liknande det som finns på deras webbplats.

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

Så anta att användaren från tabellen med sina resor väljer en rad för redigering. Det motsvarar ett komplext objekt, som innehåller en City-egenskap. Vi behöver programmatiskt välja till exempel Rom i den rullgardinsmenyn på formuläret.

Jag försökte göra:

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

försökte :

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

försökte lägga till i HTML:

optionLabel="name"

Inget blir valt.

Några råd om hur man gör det på rätt sätt?

Jag antar att jag inte bör lägga till

[(ngModel)]="selectedCity"

och gör:

this.selectedCity='Rome';

Använder Angular6 och PrimeNG 6.1.2.

Svar #1

Först och främst bör det vara klart att; vad än options-arrayen innehåller så är det de värden som är inställda på FormControl.

I det här fallet är kontrollvärdena för formen stadens objekt eftersom cities-arrayen innehåller objekt.

För att kunna ställa in formulärkontrollens värde programmässigt måste värdet vara ett av elementen från options-arrayen.

Så om du vill sätta Istanbul som vald måste du sätta exakt samma objekt från cities-arrayen (specifikt, cities[3])

Det kan göras på detta sätt;

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

Som en sidonotering innebär optionLabel="name" bara vilken fält från stadsobjekt som ska användas som visningsvärde, det är allt.

Här är en demo: https://stackblitz.com/edit/angular-6-template-6yu6jz

Relaterade artiklar