Как использовать PrimeNG Dropdown в Angular2 Model-driven form?

Question

Нужна помощь с PrimeNG dropdown в Angular2 модельный привод вид. В документации PrimeNG, которую я нашел, используются только шаблонные формы.

примера код для следующего будет в значительной степени помочь:

1. угловой модели управляемой формы
2. форма содержит один PrimeNG выпадающего меню и кнопки отправки.
3. выпадающий список содержит 4 города (Москва, Стамбул, Берлин, Париж).
4. Пользователь должен изменить выбранный город (чтобы включить кнопку «Отправить»).
5. выпадающий список может быть программно «инициализирован», чтобы показать один из городов в списке опций (например, Берлин), когда форма открывается.

Спасибо.

Answer 1

использовать модель приводимой форму в Angular2 или Angular4 вас 'необходимо изменить раскрывающийся список до

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

и экземпляр formGroup на внутреннем интерфейсе, который имеет контроль selectedCity в нем, как так ...

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

Answer 2

// шаблон обработка

<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 {Button} from 'primeng/primeng'; 
import {Dropdown} from 'primeng/primeng'; 

// класс 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 // 

    } 

}