Error "Multiple select model should be array" in NgForm

[ghost]

Expected behaviour

Error Error: Multiple select model should be array. should not happen when <ng-select> is being used inside NgForm.

Actual behaviour

The error happens when ngModel is null and when ngModel is a predefined array.
Demo: https://stackblitz.com/edit/angular-jtj3dd?file=app%2Fapp.component.html

More Info

ng-select version: 0.26.1
browser: Google Chrome
reproducible in demo page: NO (demo doesn't have NgForm example)

[varnastadeus]

@Maxkorz there is validation error since you are binding same property city in three different dropdowns while multiple dropdown requires value of type array.

[ghost]

@varnastadeus Sorry but you are wrong. Each dropdown is unique as it is bound to local <form>. Each city property is unique within each form.

I made three different dropdowns to show the error in different scenarios.

If you want, here's a single dropdown https://stackblitz.com/edit/angular-tr8vjg?file=app/app.component.css I'm still getting the error.

[varnastadeus]

@Maxkorz sorry I overlooked that. Error is happening because resetForm sets initial value to empty string "" and ng-select requires it to be array.

[ghost]

@varnastadeus but resetForm sets initial value to city: ['Nida'],....
It works fine, but I get that annoying error in the developer console.

Also, the error happens when initial value is null. Which is not correct, as null should be skipped

    private _validateWriteValue(value: any) {
        if (!isDefined(value)) {
            return;
        }

[varnastadeus]

@Maxkorz it doesn't happens when it's null. Firstly when form is created initial value of city is "" and then ['Nida'] thats why error happens. Maybe you should use reactive forms or use [(ngModel)] 🤔

[ghost]

@varnastadeus

it doesn't happens when it's null.

It does happen for me. Take a look at this demo https://stackblitz.com/edit/angular-fcpv2n?file=app/app.component.ts

Maybe you should use reactive forms or use [(ngModel)]

I'm using a basic feature of Angular. I'm pretty sure the issue is somewhere in your plugin. I'm using over 20 3rd party modules in my project and only this plugin has such issue.

[ghost]

I forked the code and added console.log to every method in NgSelectComponent

Here's what I got:

For some reasonwriteValue function executes twice. The second call is made with an empty string out of nowhere

[varnastadeus]

It doesn't comes out of nowhere, it comes from form you are having.

[ghost]

You were right. That's how Angular works. writeValue is called twice and the second call is made with an empty string for some reason.

Maybe you could extend "isDefined" method to filter out empty strings?

[anjmao]

Simply workaround would for now would be to initial ngModel with empty array like this [ngModel]="[]"

But this is a bug, ngModel should not need to be set at all if it is used only for form to gather values. I will fix it.

[hemuA1]

How the error can be resolved?
Reply

[NenadZivotic]

If you still have an error, check the form control initial value when creating the group. Example:

this.fb.group({someValue: new FomControl({value: []})}) -> this should be this.fb.group({someValue: new FomControl([])}), as this syntax with ({value: []}) can introduce this issue.