1

Angular2モデル駆動型フォームでのPrimeNG ドロップダウンのヘルプが必要です。私が見つけた PrimeNG のドキュメントでは、テンプレート駆動型のフォームしか使用していません。

次のサンプル コードは非常に役立ちます。

  1. Angular モデル駆動型フォーム
  2. フォームには、1 つの PrimeNG ドロップダウンと送信ボタンが含まれています。
  3. ドロップダウンには 4 つの都市 (モスクワ、イスタンブール、ベルリン、パリ) が含まれています。
  4. ユーザーは選択した都市を変更する必要があります ([送信] ボタンを有効にするため)。
  5. ドロップダウンをプログラムで「初期化」して、フォームが最初に開いたときにオプション リストに都市の 1 つ (ベルリンなど) を表示することができます。

ありがとう。

4

3 に答える 3

0

// テンプレートの扱い 

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

// クラス処理

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

  }

}
于 2016-07-02T08:00:06.580 に答える