Html 我们如何将ngFor formArrays与可定制控件一起使用？

问题摘要：我们的应用程序要求用户可以“添加产品”，从而生成新字段。 html:

然而，由于最近新产品类型的引入，不同的产品类型具有不同的领域类型

首先，用户从productList选择器中选择产品。 根据所选产品的类型，我们仅显示相关字段。例如，对于蔬菜，我们可能要求选择蔬菜，对于水果，我们要求选择水果

我们如何实现这种形式的动态formGroup控件？如果没有庞大的NGIF组和冗余控制，这是否可能？我们以前也遇到过验证器和ngIf的问题

我们不确定最终html是否应如下所示：

<ng-container *ngIf='Type1'>
<!--Type 1 controls->
<!--...-->
<ng-container *ngIf='Type2'>
<!--...-->

以前，我们（绿色开发人员）在两种产品类型可用时硬编码。但现在这种情况很快就失控了。我们希望我们的编码更干净，不像斯帕盖蒂那样。我们当前将冗余字段发送为空。（而不仅仅是没有这些字段）

我道歉，如果这个问题没有很好地说明。我会按需编辑

使用大量的*NGIF。但我的同事已经不知所措了。他在验证器方面也有问题。setValidators、Validators.required和updateValueAndValidity（）等等

<!--Example of contract selector, of which there can be many, depending on how many times the user clicks the add product button-->
<ng-select [virtualScroll]="true" [items]="productList" bindLabel="productName" [searchFn]="customSearch" formControlName="product">
                  <ng-template ng-option-tmp let-item="item">
                    {{ item.productName }} <br />
                    <small>Exchange: {{ item.exchange }}</small> <br />
                    <small>Contract Code: {{ item.contractCode }} 
                     </small>
                  </ng-template>
                </ng-select>
<!--...-->

{{item.productName}}

交换：{{item.Exchange}}

合同代码：{item.contractCode}

---

谢谢你的阅读

我找到了我要找的东西！ 和NgSwitch等（关于如何在NgFor中嵌套NgSwitch，也有各种各样的答案！）

谢谢大家!！如果出现任何问题，我会更新我的页面

<ng-container *ngIf='Type1'>
<!--Type 1 controls->
<!--...-->
<ng-container *ngIf='Type2'>
<!--...-->

  createProduct(): FormGroup {
    return this.formBuilder.group({
      if (productName === 'Type1'){
       product: [null, Validators.required], // selector (product)
       contractMonth: [null, Validators.required], // selector (months)
       contractYear: [null, Validators.required], // selector (years)
       comment: [null] // text
      }
      // or switch statement and onwards
    },{
// ...
    });
  }

<!--Example of contract selector, of which there can be many, depending on how many times the user clicks the add product button-->
<ng-select [virtualScroll]="true" [items]="productList" bindLabel="productName" [searchFn]="customSearch" formControlName="product">
                  <ng-template ng-option-tmp let-item="item">
                    {{ item.productName }} <br />
                    <small>Exchange: {{ item.exchange }}</small> <br />
                    <small>Contract Code: {{ item.contractCode }} 
                     </small>
                  </ng-template>
                </ng-select>
<!--...-->