Несколько мат-чип-лист в реактивных формах с тем же источником

Question

Я ищу два входа в список mat-chip-list, но кажется невозможным напрямую вывести значения sh в массивы для проверки с помощью реактивных форм.

Я уточняю, что данные загружаются из Firestore как это:

Структура моей формы:

this.editForm = this.fb.group({
  ...
  tabs: this.fb.array([
    this.fb.group({
      physicals: this.fb.array([])
      cognitives: this.fb.array([])
    });

Я хочу собрать sh фишек в 2 разные массивы, но сделать это невозможно:

add(event: MatChipInputEvent, formIndex): void {
    const input = event.input;
    const value = event.value;
    if ((value || '').trim()) {
      this.$tabs.subscribe((tabs) => {
        tabs.forEach((tab) => {
          if (tab.physicals) {
            // Tried all of this
            this.effects.physicals.push({
              name: value.trim(),
              color: 'primary',
            });
            // this.editForm.get('tabs').get(formIndex).value.physicals.push({
            //   name: value.trim(),
            //   color: 'primary',
            // });
            // tab.physicals.push({ name: value.trim(), color: 'primary' });
          }
          if (tab.cognitives) {
            // same but for cognitives
          }
        });
      });
    }

    // Reset the input value
    if (input) {
      input.value = '';
    }
  }

Поэтому, когда я вводю новый чип и нажимаю ввод, список вообще не обновляется и в некоторых случаях выдает мне «TypeError: path.split» не является ошибкой функции.

То же самое, если я преобразую значение в formControl, затем pu sh его в formArray.

То же самое, если я pu sh значение непосредственно во внешнем массив затем передать его в виде.

Идея о том, что я делаю неправильно?

Это будет выглядеть так:

Stackblitz: https://stackblitz.com/edit/angular-eiydja

Заранее благодарен за помощь!

Answer 1

Ошибка "TypeError: path.split is not a function" была вызвана тем, что вы передали число методу AbstractControl.get, но ожидал строку.

Вы можете использовать сокращенную версию:

this.editForm
      .get(["tabs", index, "physicals"])

Разветвленный стек-блиц