angular - How to use PrimeNG Dropdown in Angular2 Model-driven form?

Question

Need help with PrimeNG dropdown in an Angular2 model-driven form. The PrimeNG documentation I have found only use template-driven forms.

A sample code for the following would help greatly:

1. an Angular model-driven form
2. the form contains one PrimeNG dropdown and a submit button.
3. the dropdown contains 4 cities (Moscow, Istanbul, Berlin, Paris).
4. the user is required to change the selected city (to enable the Submit button).
5. the dropdown can be programatically "initialized" to show one of the cities in the options list (e.g. Berlin) when the form first opens.

Thanks.

Answer 1

To use the model driven form in Angular2 or Angular4 you'll need to change the dropdown to

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

and instantiate a formGroup on the backend that has the control selectedCity in it like so ...

this.angularObjectForm = this.formBuilder.group({selectedCity: [''])}

Answer 2

// template handling

<form id="demoForm" name="demoForm" [ngFormModel]="demoForm" (submit)="demoForm($event, demoForm)"
 method="post" action="" autocomplete="off">
<h3 class="first">Demo</h3>
<p-dropdown [options]="cities" [(ngModel)]="selectedCity"></p-dropdown>
<span *ngIf="!selectedCity"> Required </span>
<button pButton [disabled]="!selectedCity" type="submit" (click)="onclick()" label="Click"></button>
</form>

// Import the files required

import {Button} from 'primeng/primeng';
import {Dropdown} from 'primeng/primeng';

// class Handling

export class MyModel {

    cities: SelectItem[];

    selectedCity: string;

    constructor() {
        this.cities = [];
        this.cities.push({label:'Moscow', value:'1'});
        this.cities.push({label:'Istanbul', value:'2'});
        this.cities.push({label:'Berlin', value:'3'});
        this.cities.push({label:'Paris', value:'4'});
    }

   public demoForm(event: Event, demoForm: ControlGroup): void {
   event.preventDefault();

   // working area //

  }

}

Answer 3

To use Primeng dropdown below is simple explanation: Install primeng : npm i primeng --save

Then import it to parent module

import { DropdownModule } from 'primeng/primeng';
@NgModule({
  imports: [    
    DropdownModule
  ]
});

Add below html code to html file:

<p-dropdown 
[options]="listVariable" 
placeholder="Select" 
[(ngModel)]="selectedOption" 
(onChange)="onChangeValue()">

These are basic steps to implementation..I found very simple practical explanation here He explained it very well.