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

Question

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

在组件外部定义 FormGroup 的控件

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 没问题：

有没有正确的做法？

Answer 1

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

您可以将 provider 添加到 hello 组件，它将获得对其表单的引用

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

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

的帮助下完成的

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

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

How to Define Angular FormGroup controls out of component

angular

angular-reactive-forms

formgroups