Включение множественного выбора в nb-select, когда установлен ngModel Angular

<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>

Когда я добавляю несколько к nb-select, возникает следующая ошибка:

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

Я не эксперт по angular, поэтому я не уверен, но я думаю, что проблема в том, что angular пытается присвоить массив значений строковой переменной.

Если я удаляю несколько, он работает нормально. Также, если я удаляю ngModel, он не выдает ошибки, но тогда я не могу получить доступ к его значению в formSubmit().

Можете ли вы помочь мне решить эту проблему, пожалуйста?

Спасибо.


angular ngx-admin nebular
person velediqa    schedule 07.07.2021    source источник
comment
Согласно этой теме, это известная проблема.   -  person robert    schedule 07.07.2021

Ответы (1)


arrow_upward
0
arrow_downward

С подходом реактивных форм это работает.

В импорте модуля приложения: import { ReactiveFormsModule } from '@angular/forms';

Добавить в imports массив ReactiveFormsModule

Измените свой 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>

создайте FormGroup в файле TS:

  frm: FormGroup;

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

при отправке:

  onSubmit() {
    console.log(this.frm.value);
  }
person robert    schedule 07.07.2021
comment
Спасибо, сэр, это работает как шарм! Разве нет другого подхода, чтобы он автоматически создавал FormGroup? Я имею в виду, что с меньшим количеством кодов в файлах ts, может быть, с большим количеством кодов в файлах html, как то, что я разместил в своем вопросе. Это мой первый проект в angular, и мне нужно создать множество форм, писать и поддерживать меньше кода в файлах ts, что действительно спасает мне жизнь. Еще раз спасибо за помощь. - person velediqa; 08.07.2021
comment
@velediqa Проверьте этот ответ для быстрого сравнения и немного старше видео. Я рекомендую инвестировать в Reactive Forms, это принесет пользу в долгосрочной перспективе. - person robert; 08.07.2021
comment
Я пойду с реактивными формами. Спасибо. - person velediqa; 09.07.2021