Angular core ui multiselect don't get selected value by default

Question

I am using Angular multiselect: https://coreui.io/angular/docs/forms/multi-select but, in my UI, the options are not selected that matched with the value from API. Here is component.ts file:

import {
  Component,
  EventEmitter,
  Input,
  OnInit,
  Output,
  SimpleChanges,
} from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

interface FormValue {
  office: string;
  secondary_campaign_types: string[];
  billing_currency_code: string;
}


  form: FormGroup | undefined;
  customStylesValidated = false;

  @Input() public buyingEntityOfficesListData:
    | BuyingEntityOfficesSelectorModel
    | undefined;
  @Input() public buyingEntityOffice: BuyingEntityOfficeModel | null = null;
  @Input() public currencies: CurrencyModel[] = [];
  @Output() public submitForm = new EventEmitter<BuyingEntityOfficeModel>();

  subs: Subscription[] = [];

  constructor(private formBuilder: FormBuilder) {
    this.buildForm();
  }

  ngOnInit(): void {}

  public ngOnChanges(changes: SimpleChanges): void {
    if (changes['buyingEntityOffice']) {
      const buyingEntityOffice = changes['buyingEntityOffice']
        .currentValue as BuyingEntityOfficeModel;
      if (buyingEntityOffice) {
        if (this.form) {
          this.form.patchValue(this.convertToDisplayable(buyingEntityOffice));
        }
      }
    }
  }

  private convertToDisplayable(
    buyingEntityOffice: BuyingEntityOfficeModel
  ): FormValue {
    return <FormValue>{
      office: buyingEntityOffice.office,
      secondary_campaign_types: buyingEntityOffice.secondary_campaign_types,
      billing_currency_code: buyingEntityOffice.billing_currency_code,
    };
  }

  buildForm(): void {
    this.form = this.formBuilder.group({
      office: ['', Validators.required],
      secondary_campaign_types: [[], Validators.required],
      billing_currency_code: ['', Validators.required],
    });
  }

}

here is my html file:

<form 
  *ngIf="form" 
  cForm 
  class="row g-3 needs-validation" 
  [formGroup]="form" 
  role="form" 
  novalidate 
  cForm 
  cRow
  class="needs-validation"
>
  <c-row>
    <c-col [md]="6" class="mb-4">
      <label for="inputName" class="mb-2 grey-label">
        Name
        <span class="text-danger">*</span>
      </label>
      <input
        cFormControl
        id="inputName"
        required
        type="text"
        formControlName="office"
      />
      <validation-messages [control]="form.controls.office"></validation-messages>
    </c-col>
  </c-row>

  <c-row>
    <c-col [md]="6" class="mb-4">
      <label for="inputCampaignTypes" class="mb-2 grey-label">
        Campaign Types
        <span class="text-danger">*</span>
      </label>
      <c-multi-select
        multiple 
        id="inputCampaignTypes"
        required
        formControlName="secondary_campaign_types"
      >
        <c-multi-select-option>House</c-multi-select-option>
        <c-multi-select-option>Business</c-multi-select-option>
        <c-multi-select-option>Marketing</c-multi-select-option>
        <c-multi-select-option>Author</c-multi-select-option>
      </c-multi-select>
      <validation-messages [control]="form.controls.secondary_campaign_types"></validation-messages>
    </c-col>
  </c-row>

  <c-row>
    <c-col [md]="6" class="mb-4">
        <label for="inputCurrency" class="mb-2 grey-label">
            Billing currency
            <span class="text-danger">*</span>
        </label>
        <select 
            cSelect 
            id="inputCurrency" 
            formControlName="billing_currency_code"
        >
            <option value="">--Select--</option>
            <option *ngFor="let item of currencies" [value]="item.code">
              {{ item.code }}
            </option>
        </select>
        <validation-messages [control]="form.controls.billing_currency_code"></validation-messages>
    </c-col>
  </c-row>
</form>

form the ts file, if I print the API value (buyingEntityOffice in this case) in the browser console, I get this:

{
    "id": 56,
    "buying_entity_id": 45,
    "office": "test",
    "billing_currency_code": "EUR",
    "secondary_campaign_types": [
        "Business"
    ]
}

So, in the UI, I am supposed to get Business as the selected value for the multi-select dropdown. But, it's getting nothing as selected values by default. I even printed the console.log(this.convertToDisplayable(buyingEntityOffice)); and I get:

{
    "office": "test",
    "secondary_campaign_types": [
        "Business"
    ],
    "billing_currency_code": "EUR"
}

so, form values are set correctly using patchValue. Still, the UI is not showing the expected output. How to solve the issue?

Answer 1

Please ensure that the id, name and formControlName have the same value, this can sometimes cause issues!

Also please note: When using Reactive form validation using formGroup, you need to set new FormControl(['Business'], [Validators.required]); we should not add the required attribute!

  <c-multi-select
    multiple 
    id="secondary_campaign_types"
    name="secondary_campaign_types"
    formControlName="secondary_campaign_types"
  >
    <c-multi-select-option>House</c-multi-select-option>
    <c-multi-select-option>Business</c-multi-select-option>
    <c-multi-select-option>Marketing</c-multi-select-option>
    <c-multi-select-option>Author</c-multi-select-option>
  </c-multi-select>