如何以 Angular2 模型驱动形式使用 PrimeNG 下拉菜单？答案

【问题标题】：How to use PrimeNG Dropdown in Angular2 Model-driven form?如何以 Angular2 模型驱动形式使用 PrimeNG 下拉菜单？
【发布时间】：2016-11-03 10:25:08
【问题描述】：

在 Angular2 模型驱动 表单中需要PrimeNG dropdown 的帮助。我发现的 PrimeNG 文档只使用模板驱动的表单。

以下示例代码将有很大帮助：

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

谢谢。

【问题讨论】：

你能把你的要求写得整洁干净吗..演示已编辑
@mayur - 我澄清了这个问题。你指的是什么演示？

标签： angular dropdown primeng

【解决方案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';

// 类处理

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

  }

}

【讨论】：

谢谢！该代码引用了 ngFormModel，这让我认为它使用了旧的（已弃用的）Angular2 表单 API。你知道这在 Angular2 RC3 或更新版本中会是什么样子吗，如 here 所述

【解决方案2】：

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

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

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

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

【讨论】：

【解决方案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他解释得很好。

【讨论】：