如何在组件外定义 Angular FormGroup 控件答案

【问题标题】：How to Define Angular FormGroup controls out of component如何在组件外定义 Angular FormGroup 控件
【发布时间】：2021-06-29 09:05:48
【问题描述】：

我有一个具有 FormGroup 的组件（在示例中名为：Hello）。 FormGroup 的控件必须在组件外部使用ng-content 定义。

stackblitz 中的一个简单示例： https://stackblitz.com/edit/angular-ivy-bqczmm?file=src%2Fapp%2Fhello.component.ts

你好组件：

<form [formGroup]="fg">
  <ng-content select="[fg-controls]"></ng-content>
  <pre>{{fg.value | json}}</pre>
</form>

父组件：

<hello>
  <div fg-controls>
    <h1>Item 1</h1>
    aaa: <input formControlName="aaa" /><br /><br />
    bbb: <input formControlName="bbb" /><br /><br />
    ccc: <input formControlName="ccc" />
  </div>
</hello>

<hello>
  <div fg-controls>
    <h1>Item 2</h1>
    aaa: <input formControlName="aaa" /><br /><br />
    bbb: <input formControlName="bbb" /><br /><br />
  </div>
</hello>

我遇到了这个错误：

我知道变量是在 FormGroup 之外定义的，但在 DOM 中运行时可以：

有正确的方法吗？

【问题讨论】：

我不认为这会起作用，输入指令与 FormGroup 不在同一个组件中，即使它在 HTML 中看起来是正确的。
Bojan Kogoj，我在输入上方定义了 FormGroup（在运行时）
HTML 在运行时的外观并不重要。如果 formControlName 在同一模板中找不到父指令（FormGroupName、FormGroupDirective 或 FormArrayName），则会抛出错误。
@BojanKogoj，这不是 100%。可以通过 Angular DI 实现，但它似乎不是应该使用的方式，它可能会导致错误
不知道可以这样使用 DI。无论哪种方式，我都不确定这是否可行。

标签： angular angular-reactive-forms formgroups

【解决方案1】：

这是一个如何使用它的例子https://stackblitz.com/edit/angular-ivy-uqosqh?file=src%2Fapp%2Fhello.component.ts

您可以将提供程序添加到 hello 组件中，该组件将获得对其表单的引用

 providers: [
    {
      provide: ControlContainer,
      useFactory: hc => {
        return hc.form;
      },
      deps: [HelloComponent]
    }
  ]
...
ViewChild(FormGroupDirective) form;

但问题是控件是在创建表单元素之前呈现的，因为表单元素在 HomeComponent 元素的视图中。要完成这项工作，您应该推迟渲染内部输入，在我的情况下，我是在 setTimeout 的帮助下完成的。

但 Angular 表单 API 似乎不是这样工作的，它可能会导致您的应用程序出现问题

【讨论】：