如何使用FormBuilder绑定嵌套数据？

Question

不确定如何在这里绑定我的嵌套数据（水果）：

  private buildFormGroup(): FormGroup {
    return this.formBuilder.group({
      description: new FormControl(this.data?.description),
      color: new FormControl(this.data?.color),
      fruits: new FormControl(this.data?.fruits),
      ...
    });
  }

这是我的水果数据：

fruits: fruit[]

export interface fruit {
    type: fruitType;
    pairs: fruitPair[];
}

export enum fruitType {
    One = 1,
    Two = 2,
    Three = 3
}

export interface fruitPair {
    name: fruitName;
    size: fruitSize;
}

export enum fruitName {
    Mango = 1,
    Apple = 2,
    Guava = 3,
    Orange = 4
}

export enum fruitSize {
    S = 1,
    M = 2,
    L = 3
}

我想为每个

fruitSize

中的每个

fruitName

提供

fruitType

的下拉菜单。

类似这样的：

水果一类

芒果 [下拉菜单 - S M L]

Apple [下拉菜单 - S M L]

番石榴 [下拉菜单 - S M L]

Answer 1

  protected readonly form = this.fb.group({
      description: this.fb.control(null),
      color: this.fb.control(null),
      fruits: this.fb.array([
          this.fb.group({
              type: this.fb.control(null),
              pairs: this.fb.array([
                  this.fb.group({
                      name: this.fb.control(null),
                      size: this.fb.control(null)
                  })
              ])
          })
      ])
  });

您的嵌套列表需要 2 个数组