子組件中的FormControlName

Question

我有這個FormGroup：

{
  "action.281": {
    "section.267": {
      "loop.1": {
        "default": {
          "form.885": []
        }
      },
      "loop.2": {
        "default": {
          "form.885": []
        }
      }
    },
    "section.275": {
      "loop.1": {
        "default": {
          "form.891": ""
        }
      }
    },
    "section.276": {
      "loop.1": {
        "section.277": {
          "loop.1": {
            "default": {
              "form.894": ""
            }
          }
        },
        "default": {
          "form.892": "",
          "form.893": ""
        }
      }
      "loop.2": {
        "section.277": {
          "loop.1": {
            "default": {
              "form.894": ""
            }
          }
        },
        "default": {
          "form.892": "",
          "form.893": ""
        }
      }
    }
  }
}

我想從多個組件（父組件和子組件）中使用它。 這是我的父html組件：

<div class="app-form-action-param" [formGroup]="objectForm">
    <div [formGroupName]="'action.' + action.id">
      <div *ngFor="let section of sections">
        <app-section [section]="section" [action]="action"></app-section>
      </div>
  </div>
</div>

和我的孩子html組件：

<div class="app-section">
<fieldset [formGroupName]="'section.' + section.id">
        <fieldset *ngFor="let loop of section.loops" [formGroupName]="'loop.' + loop.id">
            <div [formGroupName]="'default'">
              <div *ngFor="let question of loop.questions" class="form-group">
                <input class="form-control" [formControlName]="'form.' + question.id" />
              </div>
            </div>
          </fieldset>
       </fieldset>
</div>

但是我收到錯誤“錯誤錯誤：找不到名稱為'section.267'的控件”，依此類推。 如何使用子組件鏈接父FormGroup和父FormGroupName？

Answer 1

您不能隱式執行此操作。 但是，您可以顯式傳遞表單組（或其相關的子級）並將其用作子組件的輸入參數：

家長：

<div class="app-form-action-param" [formGroup]="objectForm">
    <div [formGroupName]="'action.' + action.id">
        <div *ngFor="let section of sections">
            <app-section [section]="section" [action]="action"
                         [actionForm]="objectForm.controls['action.' + action.id]">
            </app-section>
        </div>
    </div>
</div>

兒童：

<div class="app-section" [formGroup]="actionForm">
    <fieldset [formGroupName]="'section.' + section.id">
        <fieldset *ngFor="let loop of section.loops" [formGroupName]="'loop.' + loop.id">
            <div [formGroupName]="'default'">
                <div *ngFor="let question of loop.questions" class="form-group">
                    <input class="form-control" [formControlName]="'form.' + question.id" />
                </div>
            </div>
        </fieldset>
    </fieldset>
</div>

那只是每個模板的一個附加屬性-您需要將actionForm聲明為子組件的@Input參數。 起初，這種額外的聲明可能顯得多余或不必要。 但是有必要確保子組件是獨立的，並提供定義良好的接口。 （由於它依賴於此，所以組件接口的一部分無論如何都是該形式。僅使該依賴關系明確是有意義的。）