Как я могу получить полный объект при добавлении или редактировании задачи, а не только идентификатор?

Я работаю над системой управления задачами, в которой задачи связаны с контактами и подзадачами. Когда я добавляю или редактирую задачу, система в настоящее время возвращает только идентификаторы контактов и строковые значения подзадач. Однако мне нужно получить полные объекты как для контактов, так и для подзадач.

Как я могу изменить свой код, чтобы получить полные объекты для контактов и подзадач при добавлении или редактировании задачи? Любые рекомендации или примеры будут с благодарностью оценены. Спасибо!

Демо @ StackBlitz

main.ts

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [TaskFormComponent],
  template: `
  <button (click) = "addTask()">Add Task</button>
  <button (click) = "editTask()">Edit Task</button>
  `,
})
export class App {
  name = 'Angular';

  constructor(private dialog: MatDialog) {}

  public addTask() {
    this.dialog
      .open(TaskFormComponent, {})
      .afterClosed()
      .pipe(filter((task) => task))
      .subscribe((task) => {
        console.info('Add Task:');
        console.info(task);
      });
  }

  public editTask() {
    let task: Task = {
      id: 1,
      title: 'Task 1',
      subtasks: [
        {
          id: 1,
          taskId: 1,
          description: 'Subtask 1',
          isDone: true,
        },
        {
          id: 2,
          taskId: 1,
          description: 'Subtask 2',
          isDone: false,
        },
      ],
      contacts: [
        {
          id: 1,
          email: '[email protected]',
          name: 'John Doe',
        },
        {
          id: 2,
          email: '[email protected]',
          name: 'Jane Doe',
        },
      ],
      status: TASK_STATUSES['IN_PROGRESS'],
    };

    this.dialog
      .open(TaskFormComponent, {
        data: { fromPopup: true, task: task },
      })
      .afterClosed()
      .pipe(filter((task) => task))
      .subscribe((task) => {
        console.info('Edit Task:');
        console.info(task);
      });
  }
}

задача-form.comComponent.ts

export class TaskFormComponent {
  protected readonly Object = Object;
  taskForm!: FormGroup;
  fromPopup = false;
  keywords!: string[];
  contacts: Contact[] = [
    {
      id: 1,
      email: '[email protected]',
      name: 'John Doe',
    },
    {
      id: 2,
      email: '[email protected]',
      name: 'Jane Doe',
    },
    {
      id: 3,
      email: '[email protected]',
      name: 'Max Max',
    },
    {
      id: 4,
      email: '[email protected]',
      name: 'Anna Anna',
    },
  ];
  @ViewChild(ChipFieldComponent) chipFieldComponent!: ChipFieldComponent;
  constructor(
    private fb: FormBuilder,
    @Optional() private dialogRef: MatDialogRef<TaskFormComponent>,
    @Optional()
    @Inject(MAT_DIALOG_DATA)
    public data: { fromPopup: boolean; task: Task }
  ) {}

  ngOnInit() {
    this.keywords = [];
    this.fromPopup = !!this.data?.fromPopup;

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

    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.map((x) => x.id),
        status: this.data?.task.status,
      });
    }
  }

  public get subTasksFormControl() {
    return this.taskForm.get('subTasks') as FormControl;
  }

  public onSubmit() {
    this.dialogRef.close(this.taskForm.getRawValue());
    this.onReset();
  }

  public onReset() {
    this.taskForm.reset();
    this.chipFieldComponent.keywords = [];
  }
}

задача-форма.компонент.html

<div mat-dialog-title>{{ data?.task ? 'Update Task' : 'Create Task' }}</div>

<mat-dialog-content>
  <form [formGroup] = "taskForm" (ngSubmit) = "onSubmit()">
    <mat-form-field>
      <mat-label>Title</mat-label>
      <input
        matInput
        formControlName = "title"
        type = "text"
        placeholder = "Enter a title"
      />
    </mat-form-field>

    <app-chip-field
      [control] = "subTasksFormControl"
      [controlTitle] = "'subtask'"
    ></app-chip-field>

    <mat-form-field>
      <mat-label>Contacts</mat-label>
      <mat-select formControlName = "contacts" multiple>
        @for (contact of 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 (click) = "onSubmit()" 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>