Как решить проблему с невозможностью чтения значений флажков из угловой формы?

Question

Я пытаюсь показать список флажков и динамически изменить этот список во время выполнения. Но как только новые флажки заполнены, form.value имеет обновленный список, но не обновленные значения (в зависимости от выбора пользователя)

Я следил за этой статьей: https://coryrylan.com/blog/creating-a-dynamic-checkbox-list-in-angular

Это мой код для добавления флажков:

private addCheckboxes() {
    const searchControls = (this.form.controls.searchDataControls as FormArray) ;
    while (searchControls.length !== 0) {
      searchControls.removeAt(0);
    }
    this.searchDataResult.map((o, i) => {
      const control = new FormControl();
      searchControls.push(control);
    });
  }

Это мой код для отправки:

  submitSelection() {
    const selectedData: number[] = this.form.value.searchDataControls
      .map((value: any, index: number) => (value ? this.searchDataResult[index].id : null))
      .filter((value: any) => value !== null);
  }

Это отлично работает при первой загрузке. Но когда addCheckboxes вызывается второй раз с новым searchDataResult, selectedData всегда пуст.