Wie wird PrimeNG Dropdown in Angular2 Model-driven Form verwendet?

Question

Benötigen Sie Hilfe mit PrimeNG dropdown in einem Angular2 modellgesteuerten Formular. Die PrimeNG-Dokumentation, die ich gefunden habe, verwendet nur Vorlagen-gesteuerte Formulare.

Ein Beispielcode für die folgenden würde sehr helfen:

1. eine Angular modellgetriebene Form
2. das Formular enthält eine PrimeNG Dropdown und eine Absenden-Button.
3. Das Dropdown enthält 4 Städte (Moskau, Istanbul, Berlin, Paris).
4. Der Benutzer muss die ausgewählte Stadt ändern (um die Schaltfläche Senden zu aktivieren).
5. das Dropdown kann programmatisch "initialisiert" werden, um eine der Städte in der Optionsliste (z. B. Berlin) anzuzeigen, wenn das Formular zum ersten Mal geöffnet wird.

Danke.

Answer 1

Um das Modell angetrieben Form in Angular2 oder Angular4 verwenden Sie Ich muss das Dropdown auf

ändern

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

und formGroup auf dem Back-End-instanziiert, die das Steuerelement selectedCity in es wie so ...

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

Answer 2

// Vorlage Handhabung

<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> 

// Importieren Sie die erforderlichen Dateien

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

// Klasse Handhabung

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 // 

    } 

}