Question

我意识到有关此问题还有其他问题，但是我的情况有所不同。

我们的架构团队以其无穷的智慧决定将NgForms抽象为自定义组件。我最近遇到的问题是，尝试使用NgModelGroup指令导致Angular抱怨“ ControlContainer没有提供程序”。

请参阅本文中的文章：Angular: Nested template driven form，我尝试在主机组件中使用“ viewProviders：[{提供：ControlContainer，useExisting：NgForm}]”。但是，Angular然后抱怨：“ NullInjectorError：没有NgForm的提供者！”

作为示例，这是尝试通过NgModelGroup指令使用此自定义表单组件的组件的结构：

<app-custom-form>

  <fieldset ngModelGroup="myGroup">
    <app-custom-input
      name="myValueName"
      placeholder="Input 1"
      [(ngModel)]="myValue"
    ></app-custom-input>

    <br>

    <app-custom-input
      name="myOtherValueName"
      placeholder="Input 2"
      [(ngModel)]="myOtherValue"
    ></app-custom-input>
  </fieldset>

</app-custom-form>

根据我对本文的理解，这确实使Angular遇到麻烦，因为NgModelGroup指令正试图在父级中找到ControlContainer。但是，从指令的角度来看，什么被视为“父母”呢？它似乎不是“ app-custom-form”，而是尝试使用指令的组件？

如果是这种情况，那么在我看来，我似乎需要以某种方式提供app-custom-form组件中存在的ControlContainer，并将其重定向到ngModelGroup指令。我不确定如何使Angular DI做到这一点，或者根本不可能。

Here是一个演示问题的Github存储库。

Answer 1

您尚未将@angular/forms FormsModule添加到模块的导入列表中。

转到您的 app.module.ts 并将此行添加到导入中：

import { FormsModule } from '@angular/forms';

，然后在模块定义中查找以下行：

imports: [ /* several import modules may be listed here */ ],

并像这样添加FormsModule（如果已经导入，则将FormsModule添加到列表中）：

imports: [ FormsModule ],

带有自定义表单组件的嵌套模板表单，没有ControlContainer的提供者

1 个答案: