Angular 5：表单数组内表单组内的嵌套表单控件

Question

我在引用formArray的formGroup中的formControlName时遇到麻烦。

formArray中formGroup的结构如下：

    const marketingFileFormGroup = this.fb.group({
      file: [],
      fileName: [],
      fileType: [],
      fileUrl: [],
      createdBy: [],
      createdAt: [],
    });

这是我目前的html设置：

<form [formGroup]="marketingProposal" novalidate>
  <div formArrayName="materials">
    <accordion>
      <accordion-group [isOpen]="true">
        <div accordion-heading class="lead clearfix">
          Marketing Materials
          <span class="float-right">
            <i class="fa fa-navicon" aria-hidden="true"></i>
          </span>
        </div>
        <div class="row">
          <div class="col-md-4">
            <button class="btn btn-primary" type="button" (click)="uploadFile()">Upload Marketing Material</button>
          </div>
        </div>
        <div class="m-3"></div>
        <div class="row">
          <div class="col-md-12 animated fadeIn" *ngIf="materials.controls.length > 0">
              <table class="table">
                  <thead>
                      <tr>
                          <th scope="col">File Name</th>
                      </tr>
                  </thead>
                  <tbody>
                    <tr *ngFor="let material of marketingMaterials; let i = index">                     
                        <td>
                          <div class="form-group">
                            <input class="form-control" [value]="material.value.fileName" formControlName="fileName">
                          </div>
                        <td>
                    </tr>
                  </tbody>
                  
                  ...

我目前遇到错误，找不到路径为'materials-> fileName'的控件

如何从formArray内的formGroup内引用fileName？

Answer 1

行

<tr *ngFor="let material of marketingMaterials; let i = index"> 

应该是：

<tr *ngFor="let material of marketingMaterials; let i = index" [formGroupName]="i">