mdb-select-2 multiple=true error selectValue.forEach is not


Topic: mdb-select-2 multiple=true error selectValue.forEach is not a function

ASOKUMAR IT asked 2 years ago

Expected behavior Using mdb-select-2 with multiple=true throws this error: Uncaught (in promise): TypeError: selectValue.forEach is not a function With multiple=true set the application is working fine.. the error is logged in the console. Works fine with multiple=false. Actual behavior

Resources (screenshots, code snippets etc.) selectValue.forEach is not a function error


Arkadiusz Idzikowski staff commented 2 years ago

When exactly does this error occur? Could you please edit your post and provide HTML/TS code you use to render the component and more information about reproduction steps?


ASOKUMAR IT commented 2 years ago

ts file code:

optionsENERGIES_BATIMENT: Array; addUserForm: FormGroup;
constructor(private fb: FormBuilder) { }

ngOnInit(): void { this.addUserForm = this.fb.group({
ENERGIES_BATIMENT: [new FormControl('')],
}); }

html:

    <div class="md-form" style="width: 13rem;">
        <mdb-select-2 [multiple]="true" label="ENERGIES_BATIMENT" formControlName="ENERGIES_BATIMENT">
            <mdb-select-all-option>tout sélectionner</mdb-select-all-option>
            <mdb-select-option *ngFor="let option of optionsENERGIES_BATIMENT" [value]="option.value">{{
                option.label }}</mdb-select-option>
        </mdb-select-2>
    </div>
</form>

Arkadiusz Idzikowski staff answered 2 years ago

The problem is in the formControl default value. You added an empty string but the component expects an array of values. In this case, if you don't want any default value, just leave the formControl empty or use null or empty array.


ASOKUMAR IT commented 2 years ago

That fixed the error. Thanks a lot.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: MDB4 13.0.0
  • Device: Desktop
  • Browser: Firefox
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No