Question

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

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

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

感谢。

Answer 1

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

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

并在后端实例化一个formGroup，其中包含控件selectedCity，如此...

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

Answer 2

//模板处理

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

  }

}

//类处理

$( document ).ready(function() {
    $("div#test").hide();
    $("a").click(function(event) {
        event.preventDefault();
        $("div#test").fadeToggle();
    });
});

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？

3 个答案: