angular - 在 embeddedView 中访问容器组件的 FormGroupDirective

Question

对响应式表单的实际工作原理有了越来越多的了解，我仍然不时地试图弄清楚实际发生了什么以及如何使特定场景发生。例如，我目前正在尝试创建一个可重用组件并通过嵌入式 View 添加输入字段。

不幸的是，我总是收到关于我的 formControlName 必须如何与父 formGroup 指令一起使用的错误。为了防止在投影内容之前发生此错误，我将内容包装在一个 ng-template 中，并将其 instanciaqtion 移动到显示投影内容的子组件。但它仍然提示没有 form group 指令存在。

因此，我的问题是:如何根据注入(inject)器处理 ng-content 或 ng-template，您能指出我做错了什么的正确方向吗？

我还尝试创建一个指令，将其放在 ng-container 上并通过 providers: [{providers: ControlContainer, useExisting: FormGroupDirective}] 注入(inject) existingFormGroup 指令。没有任何运气。

为了更好地了解实际情况，我创建了一个 stackblitz:https://stackblitz.com/edit/angular-uuvbrg

非常感谢您的时间和精力!

Answer 1

对于动态创建的 View ，Angular 区分两种类型:

• 声明 View - 声明模板的 View

• 插入 View - 插入模板的 View

这里的主要规则是上下文继承自 声明 View 树，而不是插入 View 树。

这意味着有一个像这样的模板:

<app-form-list-item>
  <ng-template #someChild>
    <input type="text" formControlName="myUsername">
  </ng-template>
</app-form-list-item>

我们应该确保 formControlName指令可以找到ControlContainer依赖从这个模板开始爬树而不是内部模板 app-form-list-item .

在 form-list-item.component.html 中放置带有 ControlContainer 提供程序的任何指令在这里无济于事，因为 formControlName 是在父组件中声明的。

一种解决方法，在这里可能可行并且不需要在父组件中编写代码，是提供 ControlContainer在你的 FormListItemComponent :

form-list-item.component.html

<form #ngForm="ngForm" ...

form-list-item.component.ts

@Component({
  ...
  providers: [
    {
      provide: ControlContainer,
      useFactory: (comp: FormListItemComponent) => comp.ngForm,
      deps: [FormListItemComponent] 
    }
  ]
})
export class FormListItemComponent implements AfterContentInit {
  ...
  @ViewChild('ngForm') ngForm: FormGroupDirective;

结果是

<app-form-list-item>    <=== ControlContainer that points to inner FormGroupDirective
 /\
 ||   <ng-template #someChild>
 ||
 ||     <input type="text" formControlName="myUsername">

而且只有当您将内容包装在模板中时它才会起作用，否则 ControlContainer将指向空的 FormGroupDirective

Forked Stackblitz

另见:

• What you always wanted to know about Angular Dependency Injection tree