angularnebularngx-admin

Enabling multiple selections in a nb-select, when Angular's ngModel is set


<form #form="ngForm" (ngSubmit)="formSubmit(form.value)">
    <nb-select name="select" ngModel multiple>
        <nb-option value="1">Item 1</nb-option>
        <nb-option value="2">Item 2</nb-option>
        <nb-option value="3">Item 3</nb-option>
        <nb-option value="4">Item 4</nb-option>
    </nb-select>
</form>

When I add "multiple" to the nb-select, following error arises:

ERROR Error: Uncaught (in promise): Error: Can't assign single value if select is marked as multiple

I'm not angular expert, so I'm not sure but I think the issue is because angular is trying to assign an array of values to a string typed variable.

If I remove "multiple", it works fine. Also if I remove "ngModel" it throws no error, but then I can't access it's value in formSubmit().

Can you help me to fix this issue, please?

Thank you.


Solution

  • With reactive forms approach it works.

    In app module import: import { ReactiveFormsModule } from '@angular/forms';

    Add to imports array ReactiveFormsModule

    Change your html

    <form [formGroup]="frm" (ngSubmit)="onSubmit()">
      <nb-select formControlName="models" multiple>
          <nb-option value="1">Item 1</nb-option>
          <nb-option value="2">Item 2</nb-option>
          <nb-option value="3">Item 3</nb-option>
          <nb-option value="4">Item 4</nb-option>
      </nb-select>
      <button type="submit">Submit</button>
    </form>
    

    create a FormGroup in TS file:

      frm: FormGroup;
    
      constructor(fb: FormBuilder) {
        this.frm = fb.group({
          models: []
        });
      }
    

    onSubmit:

      onSubmit() {
        console.log(this.frm.value);
      }