Angular任务编辑表单：如何为多选控件赋值数组数据？

点击「Edit Task」按钮打开预填任务表单后，普通字符串类型的值可正常回显，但已分配的多名人员在编辑时无法被选中，数组类型的值处理异常。

1. 表单控件assignedTo初始化为字符串类型（new FormControl('')），但多选下拉框需要数组类型的控件值来匹配选中状态
2. 赋值时直接传入了完整的联系人对象数组，而下拉框选项的value绑定的是联系人id，类型不匹配导致无法触发选中逻辑

步骤1：修正表单控件初始化 #

将assignedTo的初始值改为空数组，适配多选下拉框的数组值类型：

this.taskForm = new FormGroup({
  assignedTo: new FormControl([]), // 替换原有的空字符串
});

步骤2：正确提取选中值赋值 #

赋值时将联系人对象数组转换为对应的id数组，与下拉框选项的value类型保持一致：

if (this.data?.task) {
  this.taskForm.setValue({
    assignedTo: this.data.task.contacts.map(contact => contact.id), // 提取联系人id组成数组
  });
}

补充说明 #

如果你的可选联系人列表不是仅来自当前任务的联系人，而是全局联系人列表，需要将下拉框的循环数据源替换为全局列表，这样才能正确匹配已选中的id。当前代码中下拉框仅循环显示已分配的联系人，实际场景中需根据需求调整。

TS文件 #

export class TaskFormComponent {
  protected readonly Object = Object;
  taskForm!: FormGroup;
  fromPopup = false;

  constructor(
    @Optional()
    @Inject(MAT_DIALOG_DATA)
    public data: { fromPopup: boolean; task: Task }
  ) {}

  ngOnInit() {
    this.fromPopup = !!this.data?.fromPopup;
    this.taskForm = new FormGroup({
      assignedTo: new FormControl([]), // 修正初始值为数组
    });

    if (this.data?.task) {
      this.taskForm.setValue({
        assignedTo: this.data.task.contacts.map(contact => contact.id), // 转换为id数组赋值
      });
    }
  }

  public onSubmit() {
    console.log('Submitted');
  }
}

HTML文件（若有全局联系人列表需替换循环数据源） #

<div>
  <div>
    <div mat-dialog-title>Edit Task</div>
  </div>

  <mat-dialog-content>
    <form [formGroup]="taskForm" (ngSubmit)="onSubmit()">
      <mat-form-field>
        <mat-label>Assigned to</mat-label>
        <mat-icon color="primary" matSuffix>group_add</mat-icon>
        <mat-select formControlName="assignedTo" multiple>
          <!-- 如需显示所有可选联系人，替换为全局联系人变量，比如allContacts -->
          @for (contact of this.data.task.contacts; track contact.id) {
          <mat-option [value]="contact.id">{{ contact.name }}</mat-option>
          }
        </mat-select>
      </mat-form-field>
    </form>
  </mat-dialog-content>

  <mat-dialog-actions>
    <button mat-raised-button color="primary" type="submit">
      {{ data?.task ? 'Update Task' : 'Create Task' }}
    </button>
    <button mat-raised-button mat-dialog-close type="button" color="warn">
      Close
    </button>
  </mat-dialog-actions>
</div>

内容的提问来源于stack exchange，提问作者coder