I'm using Angular's Reactive Forms to create a list of PrimeNG dropdowns. The story is as follows: an Operator of my application has multiple supported languages (e.g. English, Greek, Spanish). For each language, I'm creating a p-dropdown whose options are all the available languages and it's bound to the selected languages of the Operator.
Here is how I'm creating the Reactive Form's data:
this.selectedOperator?.languages.forEach((language: LanguageModel) =>
this.languagesFormGroups.push(this.operatorFormService.createLanguagesEditForm(this.editForm, language))
);
createLanguagesEditForm(form: FormGroup, language: LanguageModel): FormGroup {
const languagesArray: FormArray = <FormArray>form.get('languages');
const arrayLength: number = languagesArray.length;
const languagesFormGroup: FormGroup = this.formBuilder.group({
name: language.name,
icon: language.icon,
languageID: language.languageID
});
languagesArray.insert(arrayLength, languagesFormGroup);
return languagesFormGroup;
}
And this is my p-dropdown, for every selected language of the Operator:
<div class="display-block" *ngFor="let languagesFormGroup of languagesFormGroups; let i = index">
<form data-qa="customEditorForm" [formGroup]="languagesFormGroup">
<div class="form-item">
<label class="form-label">Language {{ i + 1 }}</label>
<p-dropdown [styleClass]="'form-control'"
optionValue="languageID"
formControlName="name"
[options]="languages"
optionLabel="name"
appendTo="body"
dataKey="languageID">
</p-dropdown>
</div>
</form>
</div>
For some reason, even though I'm stating that my optionValue and dataKey is the languageID, it never gets selected. I always see the very first language in the list selected.
What am I doing wrong? How can I pre-select the correct language in my languages list?