angular - 具有相同来源的反应形式的多个 mat-chip-list

问题描述

我搜索有两个 mat-chip-list 输入，但似乎不可能直接将值推送到数组中，以便通过反应形式进行检查。

我精确地从 Firestore 加载数据，如下所示：

我的表格结构是：

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

我想将芯片推入 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 = '';
    }
  }

因此，当我输入新芯片并按 Enter 键时，列表根本不会更新，并且在某些情况下会抛出“TypeError：path.split is not a function”错误。

如果我将值转换为 formControl 然后将其推送到 formArray 中也是一样的。

如果我直接将值推送到外部数组中，然后在表单中传递它，也是一样的。

知道我做错了什么？

它看起来像这样：

堆栈闪电战： https ://stackblitz.com/edit/angular-eiydja

在此先感谢您的帮助！

标签： angulartypescriptgoogle-cloud-firestoreangular-material

该错误"TypeError: path.split is not a function"是由于您将数字传递给AbstractControl.get方法但它需要一个字符串这一事实引起的。

您可以使用短版：

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

分叉的 Stackblitz

angular - 具有相同来源的反应形式的多个 mat-chip-list

问题描述

解决方案

推荐阅读