如何在角度 6 中为反应形式设置多选下拉列表的值 - TypeScript

在 Angular 中，我们可以轻松地使用 select 元素来创建下拉列表。但是在某些情况下，我们需要在下拉列表中选择多个选项。为此，Angular 提供了一种多选下拉列表的解决方案。

本文将介绍如何在 Angular 6 中使用反应式表单来创建多选下拉列表，并设置其选项的值。

准备工作

首先，我们需要导入 ReactiveFormsModule 模块以使用反应式表单。打开您的 app.module.ts 文件并添加以下代码：

import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
    ReactiveFormsModule
  ],
  // other configurations
})
export class AppModule { }

创建多选下拉列表

首先，让我们创建一个简单的下拉列表。在您的组件模板中，添加以下代码：

<select multiple formControlName="selectedOptions">
  <option *ngFor="let option of options" [value]="option.value">{{ option.label }}</option>
</select>

以上代码中，我们使用 formControlName 属性指定相应的表单控件名称，并使用 *ngFor 呈现选项。

在您的组件中，添加以下代码：

import { FormGroup, FormControl } from '@angular/forms';
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <form [formGroup]="form">
      <select multiple formControlName="selectedOptions">
        <option *ngFor="let option of options" [value]="option.value">{{ option.label }}</option>
      </select>
    </form>
  `
})
export class AppComponent {
  form: FormGroup;
  options = [
    { label: 'Option 1', value: 'option1' },
    { label: 'Option 2', value: 'option2' },
    { label: 'Option 3', value: 'option3' },
    { label: 'Option 4', value: 'option4' }
  ];

  constructor() {
    this.form = new FormGroup({
      selectedOptions: new FormControl([])
    });
  }
}

以上代码中，我们创建了一个 FormGroup 表单，其中包含一个名为 selectedOptions 的 FormControl 表单控件。在我们的组件构造函数中，我们初始化了 FormGroup 和 FormControl 对象。

现在我们可以通过绑定到 form.value 对象来访问当前选定的选项数组。

设定默认选择

您也可以使用 setValue 方法来为多选下拉列表设置默认值。为此，请在您的组件构造函数中添加以下代码：

constructor() {
  this.form = new FormGroup({
    selectedOptions: new FormControl([])
  });

  this.form.controls.selectedOptions.setValue(['option1', 'option3']);
}

以上代码中，我们调用了 setValue 方法将 selectedOptions 表单控件设置为包含选项 option1 和 option3 的数组。

结论

本文介绍了如何使用反应式表单来创建多选下拉列表。我们还学习了如何设置默认选项。请记住，您可以使用 form.value 对象来访问当前选定的选项。