p-dropdown 不显示表单中的值答案

【问题标题】：p-dropdown doesn't show value from formp-dropdown 不显示表单中的值
【发布时间】：2018-11-13 20:13:27
【问题描述】：

当我使用绑定表单的 p-dropdown 组件时遇到问题。我有一个带有表单控件的表单组，这些表单控件预先加载了我们自己的值，并且其中一个控件的值应显示在 p-dropdown 组件中。但是在页面加载时它是不可见的。

我使用的 Dropdown 看起来像：

<p-dropdown [options]="vehicleTypes" placeholder="Vehicle Type" optionLabel="label" formControlName="vehicleType">

我的组件有一个表单组，它有一个名为 vehicleType 的表单控件，并带有值。

{label: "TYPE 1", value: "1"}

【问题讨论】：

标签： angular forms dropdown primeng

【解决方案1】：

为什么在表单控件中有标签？只需像这样在 formControl 中保留值：

app.component.ts

appForm: FormGroup;

vehicles = [
 {value: 1, label: 'v1'},
 {value: 2, label: 'v2'},
 {value: 3, label: 'v3'},
 {value: 4, label: 'v4'},
 {value: 5, label: 'v5'},
 {value: 6, label: 'v6'},
]

constructor(
 private fb: FormBuilder
) {}

ngOnInit() {
this.appForm = this.fb.group({
  vehicleType: new FormControl(2)
});

app.component.html

<form [formGroup]="appForm">
 <p-dropdown [optionLabel]="label" placeholder="Vehicle Type" 
  [options]="vehicles" formControlName="vehicleType"></p-dropdown>
</form>

【讨论】：

这对我不起作用。下拉菜单继续显示占位符。
我在 stackblitz 上为你添加了代码。 stackblitz.com/edit/…

【解决方案2】：

这些值必须设置为您的vehicleTypes，例如：

vehicleTypes = [
    {label: "TYPE 1", value: "1"}
]

而vehicleType 就像 Bravin 所说的那样是一个 FormControl。

一般来说，我们可以使用第一个元素作为占位符。

【讨论】：