child 组件中的 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": ""
        }
      }
    }
  }
}

我想从多个组件（parent 和 child 组件）使用它。这是我的 parent 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>

还有我的 child 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>

但是我得到了错误"ERROR Error: Cannot find control with name: 'section.267'"等等。如何将 child 组件用于 link parent FormGroup 和 Parent FormGroupName？

Answer 1

你不能隐式地这样做。但是你可以显式地传递表单组（或其相关的 children）并将其用作 child 组件的输入参数：

Parent:

<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>

Child:

<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 声明为 child 组件的 @Input 参数。起初，这个额外的声明可能看起来是多余的或不必要的。但是是确保 child 组件是 self-contained 并提供定义良好的接口所必需的。（因为它依赖于它，所以组件接口的一部分无论如何都是表单。只有明确表示依赖性才有意义。）

child 组件中的 FormControlName

FormControlName in child component

forms

parent-child

angular