如何在 Angular2 模型驱动形式中使用 PrimeNG Dropdown？

Question

在 Angular2 模型驱动 形式的 PrimeNG dropdown 方面需要帮助。我发现的 PrimeNG 文档只使用模板驱动的形式。

下面的示例代码会有很大帮助：

Angular 模型驱动表单
表单包含一个 PrimeNG 下拉菜单和一个提交按钮。
下拉列表包含 4 个城市（莫斯科、伊斯坦布尔、柏林、巴黎）。
用户需要更改所选城市（以启用“提交”按钮）。
下拉列表可以编程方式"initialized"在表单首次打开时显示选项列表中的城市之一（例如柏林）。

谢谢。

Answer 1

// 模板处理

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

// class 处理

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 2

要在 Angular2 或 Angular4 中使用模型驱动表单，您需要将下拉列表更改为

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

并在后端实例化一个 formGroup，其中包含 selectedCity 控件，就像这样...

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

Answer 3

下面的Primeng下拉菜单是简单的解释：安装 primeng ： npm i primeng --save

然后导入父模块

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

将下面的 html 代码添加到 html 文件：

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

这些是实现的基本步骤。我找到了非常简单实用的解释here他解释得很好。

如何在 Angular2 模型驱动形式中使用 PrimeNG Dropdown？

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

angular

dropdown

primeng