如何在 select 框中使用空值？

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 框显示此表单：

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

我希望这个 select 框在第一次加载时是空的。但是有 selected 'position0' 值。有问题。

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

这是live example

Answer 1

我试图快速实现它并且它按你想要的方式工作，你的代码看起来不错我不知道缺少什么但这是我的实现。

在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 2

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

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

Answer 3

添加对象：

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

作为数组中的第一个。

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

如何在 select 框中使用空值？

How to use empty value in select box?

primeng

angular

primeng-dropdowns