PrimeNG p-dropdown with reactive forms not binding to value

Viewed 173

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?

0 Answers
Related