如何在添加/编辑任务时获取联系人与子任务的完整对象？

当前系统在添加/编辑任务时，仅返回联系人ID和子任务描述字符串，需调整代码以返回完整对象，修改步骤如下：

一、调整联系人选择逻辑，返回完整联系人对象 #

1. 修改模板选项值
   在task-form.component.html的mat-select中，将mat-option的绑定值从联系人ID改为完整联系人对象，确保表单存储完整数据：

   <mat-form-field>
     <mat-label>Contacts</mat-label>
     <mat-select formControlName="contacts" multiple>
       @for (contact of contacts; track contact.id) {
       <mat-option [value]="contact">{{ contact.name }}</mat-option>
       }
     </mat-select>
   </mat-form-field>
   

2. 修正表单初始化逻辑
   在task-form.component.ts的ngOnInit方法中，编辑任务时直接传入完整联系人数组，无需提取ID：

   if (this.data?.task) {
     this.taskForm.patchValue({
       id: this.data.task?.id,
       title: this.data.task.title,
       subTasks: this.data.task.subtasks.map((x) => x.description),
       contacts: this.data.task.contacts, // 直接传入完整联系人对象数组
       status: this.data?.task.status,
     });
   }
   

3. 设置表单控件默认值
   初始化表单时，将contacts控件默认值设为空数组，匹配多选场景：

   this.taskForm = this.fb.group({
     id: this.data?.task?.id,
     title: new FormControl(''),
     subTasks: new FormControl([]),
     contacts: new FormControl([]), // 设为空数组
     status: TASK_STATUSES['TO_DO'],
   });
   

二、处理子任务，返回完整子任务对象 #

当前app-chip-field仅收集子任务描述字符串，需在提交时将其转换为包含完整属性的子任务对象：

修改task-form.component.ts中的onSubmit方法，完成子任务对象转换：

public onSubmit() {
  const formValue = this.taskForm.getRawValue();
  
  // 将子任务描述转换为完整对象
  const fullSubtasks = formValue.subTasks.map((desc: string, index: number) => ({
    id: Date.now() + index, // 前端临时生成唯一ID，实际可由后端分配
    taskId: formValue.id || null, // 关联当前任务ID，新增任务时可留空
    description: desc,
    isDone: false // 默认未完成状态
  }));

  // 组装包含完整对象的最终任务数据
  const finalTask = {
    ...formValue,
    subtasks: fullSubtasks,
    contacts: formValue.contacts
  };

  this.dialogRef.close(finalTask);
  this.onReset();
}

三、验证效果 #

添加或编辑任务时，控制台输出的任务对象将包含：

• contacts：完整联系人对象数组（含id/email/name）
• subtasks：完整子任务对象数组（含id/taskId/description/isDone）

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