Angular 9 使用模板方法嵌套 forms：如何將多個相同的子組件添加到表單 object？

Question

我對 Angular 很陌生，但在我來到這里之前，我嘗試了很多谷歌搜索以找到解決方案。
我的問題：
使用模板方法，我嘗試創建一個嵌套表單，其中還包含子組件的輸入字段。 為了讓子組件注冊在父窗體 object 中，我在子組件中添加了：

viewProviders: [ { provide: ControlContainer, useExisting: NgForm }

它工作正常，子組件輸入現在集成到父表單 object 中。 但是，子組件被多次引用，因此它的字段集應該多次集成到表單對象中。 相反，子組件的輸入字段只添加一次。我認為這是因為輸入字段需要唯一的名稱，否則它們只會被覆蓋，或者？
為了更清楚地說明，我使用 ngFor 循環配置文件，該文件包含子組件需要多久加載到父模板的信息。 這是我循環配置文件的父組件的模板。 我用 Angular Bootstrap 創建了一個手風琴：

父.html

<form (ngSubmit)="onSubmitJob()" #f="ngForm">
    <div class="form-group">
      <div *ngFor="let process of processMappings">
        <div *ngIf="process.processId === selectedProcessingTool">
          <div *ngFor="let input of process.inputs; let i = index">
            <ngb-accordion
              #acc="ngbAccordion"
              activeIds="ngb-panel-0"
            >
              <ngb-panel title="{{ input.inputType }}">
                <ng-template ngbPanelContent>
                  <child-component
                    *ngIf="
                      input.inputType == 'StaticSubsetDefinition';
                    "
                  ></child-component>
                </ng-template>
              </ngb-panel>
            </ngb-accordion>
          </div>
        </div>
      </div>
    </div>
</form>

這是子組件的模板，其中包括一個字段集：

child.html

<fieldset ngModelGroup= "staticSubsetDefinition">

  <div class="form-group">
    <label for="value">Wert</label>
    <input
      style="max-width: 300px;"
      class="form-control"
      id="value"
      placeholder=""
      ngModel
      name = "value"
      required
    />
  </div>

  <div class="form-group">
    <label class="my-1 mr-2" for="dataType">Datentyp</label>
    <select
      class="form-control"
      id="dataType"
      style="max-width: 300px;"
      ngModel
      name="dataType"
      required
    >
      <option selected></option>
      <option value="text">Text</option>
      <option value="numeric">numerisch</option>
    </select>
  </div>
</fieldset>

父模板創建了一個帶有兩個面板的協議，因為子模板被加載了兩次。 但是，formobject 確實只注冊了一個，我猜這是因為輸入需要唯一的名稱。
因此，我的問題是，我可以做些什么來更改輸入字段的名稱，例如通過將索引添加到字段集名稱？
我不知道如何將索引添加到子組件的輸入名稱中，例如在 for 循環中。 這個怎么做？ 還是有另一種方法告訴 Angular 像加載到模板一樣頻繁地添加表單？

我的意思是在星星之間是這樣的（我知道這是錯誤的，只是為了讓您了解我的意思）：

<div *ngFor="let input of process.inputs; let i = index">
            <ngb-accordion
              #acc="ngbAccordion"
              activeIds="ngb-panel-0"
            >
              <ngb-panel title="{{ input.inputType }}">
                <ng-template ngbPanelContent>
                  <child-component
                    *ngIf="
                      input.inputType == 'StaticSubsetDefinition';
                    " **inputname == 'inputname_ + i'**
                  ></child-component>
                </ng-template>
              </ngb-panel>
            </ngb-accordion>
          </div>

本質上，我不知道如何從父組件的模板中訪問輸入字段名稱。 但是，如果有其他方法可以將組件字段添加到 forminput，我會很高興如何在此代碼中執行此操作。

Answer 1

我自己找到了一個解決方案，正如我所料，這是一個簡單的解決方案，只需使用 Angulars Input 指令：我只需將 Input 添加到子組件，定義一個從父模板接收值的變量，然后使用使用字符串插值更改子組件中字段集名稱的值（此處為索引）：

child.ts

import { Input} from '@angular/core';
...
@Input() index: number;

在子模板中，我使用字符串插值更改字段集名稱：

child.html

<fieldset ngModelGroup= "staticSubsetDefinition_{{index}}">

然后索引變量的值通過使用屬性綁定[index] = i來自父模板：

父.html

<div *ngFor="let input of process.inputs; let i = index">
            <ngb-accordion
              [closeOthers]="true"
              #acc="ngbAccordion"
              activeIds="ngb-panel-0"
            >
              <ngb-panel title="{{ input.inputType }}">
                <ng-template ngbPanelContent>
                  <child-component [index]="i"
                    *ngIf="
                      input.inputType == 'StaticSubsetDefinition';
                    "
                  ></child-component>
                </ng-template>
              </ngb-panel>
            </ngb-accordion>
          </div>