如何在选择框中使用空值?

Question

我有大量的员工职位:

positions = [
{
id: '0',
title: 'position0',
},
{
id: '1',
title: 'position1',
},
{
id: '2',
title: 'position2',
},
{
id: '3',
title: 'position3',
},
];

我创建响应式表单。如您所见，这个表单的单个字段没有初始化:

form: FormGroup = new FormGroup({
position: new FormControl(),
});

然后我尝试使用select box:

显示这个表单

<div [formGroup]="form">
<p-dropdown
[options]="positions"
formControlName="position"
optionValue="id"
optionLabel="title"
>
</p-dropdown>
</div>

我希望这个选择框在第一次加载时是空的。然而，有一个选择的'position0'值。这是个问题。

我需要像'Please choose position'这样的显示标签。

下面是实例

Answer 1

缺少p-dropdown组件的placeholder属性。请添加placeholder="Please choose position"

<p-dropdown
[options]="positions"
formControlName="position"
placeholder="Please choose position" <!-- HERE
optionValue="id"
optionLabel="title"
>

Answer 2

我试着快速实现它，它像你想要的那样工作，你的代码看起来不错，我不知道缺少什么，但这里是我的实现。

在app.component.ts

theForm: FormGroup;
positions = [
{
id: '0',
title: 'position0',
},
{
id: '1',
title: 'position1',
},
{
id: '2',
title: 'position2',
},
{
id: '3',
title: 'position3',
},
];
constructor(
private fb: FormBuilder
) {}
ngOnInit() {
this.theForm = this.fb.group({
position: new FormControl(2)
});
}

和在app.component.html中:

<form [formGroup]="theForm">
<p-dropdown optionLabel="title" placeholder="Please choose position" 
[options]="positions" formControlName="position"></p-dropdown>
</form>

stackblitz

Answer 3

添加对象:

{
id: '',
title: 'Please select an option'
}

作为数组中的第一个

您也可以尝试将相同的映射到动态数据中。