如何在PrimeNG模型驱动的表单中使用Angular2下拉列表？
如何在PrimeNG模型驱动的表单中使用Angular2下拉列表？
提问于 2016-07-01 06:02:50
需要PrimeNG下拉在Angular2 模型驱动的表单中的帮助。我发现的PrimeNG文档只使用模板驱动的表单。
以下示例代码将有很大帮助：
- 角模型驱动的形式
- 该表单包含一个PrimeNG下拉列表和一个提交按钮。
- 下楼有4个城市(莫斯科、伊斯坦布尔、柏林、巴黎)。
- 用户需要更改选定的城市(以启用Submit按钮)。
- 下拉列表可以编程“初始化”，以便在表单第一次打开时显示选项列表中的一个城市(例如柏林)。
谢谢。
回答 3
Stack Overflow用户
回答已采纳
发布于 2017-08-04 16:42:10
要在Angular2或Angular4中使用模型驱动的表单，需要将下拉列表更改为
<p-dropdown [options]="cities" formControlName="selectedCity"></p-dropdown> 并在后端实例化一个formGroup，其中包含控件selectedCity，如下所示.
this.angularObjectForm = this.formBuilder.group({selectedCity: [''])}Stack Overflow用户
发布于 2016-07-02 08:00:06
//模板处理
<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 //
}
}Stack Overflow用户
发布于 2018-12-17 07:11:10
下面要使用Primeng下拉列表是一个简单的解释：：npm -保存
然后将其导入父模块。
import { DropdownModule } from 'primeng/primeng';
@NgModule({
imports: [
DropdownModule
]
});将以下html代码添加到html文件中：
<p-dropdown
[options]="listVariable"
placeholder="Select"
[(ngModel)]="selectedOption"
(onChange)="onChangeValue()">这些是实现的基本步骤。我发现了非常简单的实用解释，这里，他解释得很好。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38138098
复制相关文章
相似问题
腾讯云开发者
