p-dropdown with model

[stevewithington]

I'm totally stuck on getting the model-driven p-dropdown to work. Any help on my StackBlitz would be truly appreciated:
https://stackblitz.com/edit/angular-pri ... -pdropdown

I can't get the `formControlName` piece figured out.

Cheers,
Steve

[LucioB81]

You don't have to use a formarray, that's used for other scenarios.

In the html:

Code: Select all

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

and in app.component.ts:

Code: Select all

export class AppComponent {
  myForm: FormGroup;

  cities: SelectItem[];
  selectedCity: City;

  constructor(private fb: FormBuilder) {
    this.cities = [
      { label: 'Select City', value: null },
      { label: 'New York', value: { id: 1, name: 'New York', code: 'NY' } },
      { label: 'Rome', value: { id: 2, name: 'Rome', code: 'RM' } },
      { label: 'London', value: { id: 3, name: 'London', code: 'LDN' } },
      { label: 'Istanbul', value: { id: 4, name: 'Istanbul', code: 'IST' } },
      { label: 'Paris', value: { id: 5, name: 'Paris', code: 'PRS' } }
    ];

    this.myForm = new FormGroup({
      'selectedCity': new FormControl(null)
    })
  }

  initCityFormGroup(obj: any): FormGroup {
    return this.fb.group({
      obj
    });
  }

Tried it in stackblitz and it works.