子组件中的 FormControlName答案

【问题标题】：FormControlName in child component子组件中的 FormControlName
【发布时间】：2019-04-20 01:14:36
【问题描述】：

我有这个 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 ？

【问题讨论】：

标签： angular forms parent-child

【解决方案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 参数。起初，这个额外的声明似乎是多余的或不必要的。但是有必要确保子组件是自包含的并提供定义良好的接口。（因为它依赖于它，所以组件接口的一部分无论如何都是表单。只有明确表示该依赖关系才有意义。）

【讨论】：

效果很好！谢谢！