首页 文章

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

提问于
浏览 次
1

我意识到存在关于这个问题的其他问题，但我的情况有点不同。

我们的建筑团队以其无限的智慧决定将 NgForms 抽象为一个自定义组件。我最近遇到的是尝试使用 NgModelGroup 指令导致 Angular 抱怨“没有 ControlContainer 的提供者”。

引用这篇中文文章：Angular：嵌套模板驱动表单，我试图在我的主机组件中使用'viewProviders：[3]'。然而，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 和 re-direct 提供给 ngModelGroup 指令。我不确定如何让 Angular DI 做到这一点，或者它是否可能。

这里是一个 Github 回购，展示了这个问题。

angular forms dependency-injection

1 回答

  • -1

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

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

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

    并在模块定义中查找这样的行：

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

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

    imports: [ FormsModule ],
    回复于

相关问题