Nebular: Can't assign single value if select is marked as multiple when form.reset() is called

[kshkrao3]

Issue type

I'm submitting a

• [ ] feature request
• [x] bug report

Issue description

Current behavior:
NbSelect with _multiple_ property throws error Can't assign single value if select is marked as multiple, when form.reset() is triggered.

Expected behavior:
NbSelect should not throw any error on form.reset().

Steps to reproduce:

• Define a FormGroup instance and provide a property for multiple select.
  this.form = this.fb.group({ multiproperty: [null] })
• Attach it to NbSelect with multiple component within a form.
  <nb-select multiple placeholder="Choose Options" name="multipleopts" [formControl]="form.controls['multiproperty']" fullWidth id="multiopts"> <nb-option *ngFor="let opt of globalService.multiopts" [value]="opt.key"> <nb-icon [icon]="opt.icon" pack="font-awesome"></nb-icon> &nbsp; &nbsp;{{opt.value}} </nb-option> </nb-select>

Related code:
https://stackblitz.com/edit/nbselect-multiple-issue

Other information:

npm, node, OS, Browser

Node - 10.16.0
NPM - 6.9.0
OS - Windows X
Browser - Chrome, Firefox

Angular, Nebular

Angular - 8.0.0
Nebular - 4.1.2

Error Screenshot

[shpongly]

I'm having the same Issue. When trying to reset a form with Nebular select multiple, I recieve the msg:
'Can't assign single value if select is marked as multiple'.

Is there any workaround on this error until fix?

[kshkrao3]

@shpongly What I have done is, I have kept the form initialization in a method and instead of assigning null value to multiproperty I assigned empty array. Something like below:

initForm() {
   this.form = this.fb.group({
       multiproperty: []
   });
}

Then, instead of form.reset() I call this.initForm().

This solved the issue in my case

[ccruza]

You can also use:

this.Formulario.controls.multiproperty.setValue([]);

An empty array make it works.

[rdev-software]

Any update on this, I have simple multi select

   <div class="form-control-group my-3"  *ngIf="categoryService.categories$ | async as categories; else loading">
            <nb-select
              placeholder="Category"
              id="input-categories"
              style="width: 100%;"
              multiple
              [(ngModel)]="artwork.categories"
              name="categories"

            >
              <nb-option value="{{ cat.uid }}" *ngFor="let cat of categories">{{ cat.name_en }}</nb-option>
            </nb-select>
          </div>

But when page is loaded I am getting same error, and onSubmit value is not stored in ngModel property

[rdev-software]

Same code works fine with native select:

   <div class="form-control-group my-3" *ngIf="categoryService.categories$ | async as categories; else loading">
            <select
              placeholder="Category"
              id="input-categories"
              style="width: 100%;"
              multiple
              [(ngModel)]="artwork.categories"
              name="categories"
            >
              <option value="{{ cat.uid }}" *ngFor="let cat of categories">{{ cat.name_en }}</option>
            </select>
          </div>

[el7or]

I have same issue :(

[bhanu2507]

Same issue

[ali-kamalizade]

I had this problem in a component implementing ControlValueAccessor.
To fix this issue I initialized the value to be an empty array and made sure to not set a falsy value in writeValue.

[nanjadev]

I have sorted it by set FormControl value as empty array.

// x.component.ts
 thirdForm: FormGroup;
 ngOnInit() {
    this.form= this.fb.group({
      multiple_input: [[], [Validators.required],
    });
}

[Jackson88]

Issue related to Angular bug https://github.com/angular/angular/issues/14988
With using ngModel value accessor is writing value twice on init, first time with "null" value

[fatihbabacan92]

Still an issue for me. It stops certain lines of code from executing. Moved on to material for the meantime.

[Luchooo]

Use <nb-select [(selected)]="selected"></nb-selected>