当设置 Angular 的 ngModel 时，在 nb-select 中启用多个 selection

Question

<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() 中的值。

你能帮我解决这个问题吗？

谢谢。

Answer 1

使用 reactive forms 方法有效。

在应用模块导入中：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>

在 TS 文件中创建一个 FormGroup：

  frm: FormGroup;

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

提交时：

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

当设置 Angular 的 ngModel 时，在 nb-select 中启用多个 selection

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

angular

ngx-admin

nebular