Not sure how to bind my nested data (fruits) here:

  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),
      ...
    });
  }

This is my fruits data:

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
}

I would like to have dropdowns for the fruitSize for each fruitName in each fruitType.

Something like this:

Fruit Type One

Mango [dropdown – S M L]

Apple [dropdown – S M L]

Guava [dropdown – S M L]