Установите значение раскрывающегося списка Primeng в форме, управляемой моделью - PullRequest
Новая
       97

Установите значение раскрывающегося списка Primeng в форме, управляемой моделью

1 голос
/ 27 мая 2020

Я пытаюсь заполнить форму, в которой есть несколько раскрывающихся списков PrimeNg. Для простоты позвольте мне использовать пример, аналогичный тому, что есть на их веб-сайте. 

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

Итак, предположим, что пользователь из таблицы со своими поездками выбирает строку для редактирования. Он соответствует некоторому сложному объекту, который содержит свойство City. Нам нужно программно выбрать, скажем, Рим в раскрывающемся списке формы.

Я пытался сделать: 

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

попробовал: 

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

попытался добавить к html: 

optionLabel="name"

Ничего не выбирается.

Есть какие-нибудь советы, как это сделать правильно?

Полагаю, мне не следует добавлять 

[(ngModel)]="selectedCity"

, а делать: 

this.selectedCity='Rome';

Используя Angular6 и PrimeNG 6.1.2.

1 Ответ

1 голос
/ 28 мая 2020

Прежде всего должно быть ясно, что; независимо от того, что содержит массив options, они являются значениями, установленными в FormControl.

В этом случае значениями контроля формы являются city objects , потому что массив cities содержит объекты.

Чтобы программно установить значение элемента управления формы, значение должно быть одним из элементов из массива options.

Итак, если вы хотите установить Istanbul как выбранный, вы должны установить точно такой же объект из массива cities (в частности, cities[3])

Это можно сделать таким образом; 

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

В качестве примечания optionLabel="name" только указывает, какое поле от городских объектов к использовать как отображаемое значение, вот и все.

Вот демонстрация: https://stackblitz.com/edit/angular-6-template-6yu6jz

...