Блог

У меня есть масса должностей сотрудников:

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

Я создаю реактивную форму. Как вы видите, одно поле этой формы не инициализировано:

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

Затем я пытаюсь отобразить эту форму с помощью поля выбора:

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

Я ожидаю, что это поле выбора будет пустым при первой загрузке. Однако выбрано значение «позиция 0». Это проблема.

Мне нужна отображаемая метка типа «Пожалуйста, выберите позицию».

Вот живой пример

Нам не хватает placeholder атрибута p-dropdown компонента. Пожалуйста, добавьте placeholder="Please choose position"

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

Я попытался быстро реализовать его, и он работал так, как вы хотели, ваш код выглядит нормально, я не знаю, чего не хватает, но вот моя реализация.

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

стакблитц

Добавьте объект:

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

как первый в массиве.

Вы также можете попробовать сопоставить то же самое с динамическими данными.