Angular2 - 无法绑定到“formGroup”，因为它不是“form”的已知属性

Posted 2023-03-13

【中文标题】Angular2 - 无法绑定到“formGroup”，因为它不是“form”的已知属性

【英文标题】：Angular2 - Can't bind to 'formGroup' since it isn't a known property of 'form'

【发布时间】：2017-02-26 23:51:04

【问题描述】：

我知道other 有关该主题的问题，但我似乎遗漏了有关导入 FormsModule 和 ReactiveFormsModule 的一些内容。

我有一个带有动态主体的模态组件。这个想法是拥有一个可重用的模态库，其中包含从 URL 加载或从预加载模板填充的动态主体。

（为简洁起见）

modal-dialog.html

<!--modal-content-->

<!--modal-header-->

<modal-body [BodyTemplateUrl]="BodyTemplateUrl" [BodyTemplate]="BodyTemplate"></modal-body>

<!--modal-footer-->

modal-body.html（使用angular2-component-outlet的动态模板）

  <ng-container *componentOutlet="template; context: context"></ng-container>

modal-body.component.ts

@Input() BodyTemplateUrl: string;
@Input() BodyTemplate: string;

constructor()  

ngAfterViewInit() 
  // this.template = require(this.BodyTemplateUrl);  // 'module undefined' when doing this

  this.template = this.BodyTemplate;  // can't bind to formGroup error.. 

licences.html

<modal-dialog [HeaderText]="modalHeaderText"
          [ActionButtonText]="actionButtonText"
          [OkButtonText]="okButtonText"
          [CloseButtonText]="closeButtonText"
          [BodyTemplateUrl]="bodyTemplateUrl"
          [Body]="bodyTemplate">
</modal-dialog> 

我试图让“modal-body”组件加载“BodyTemplateUrl”， 但出现“模块未定义”错误。 Q1 - 此 URL 是相对于模态对话框组件还是许可证 组件？

现在我在“licences.component”中加载正文模板，并通过输入将其传递给对话框组件。现在的问题是“licences.add.html”（正文模板） 无法识别 [formGroup] 指令，出现错误“无法绑定到 'formGroup' 因为它不是“形式”的已知属性。

ReactiveFormsModule 和 FormsModules 在 SharedModule 中导入（和导出），其中 模态模块存在。然后将 SharedModule 导入到“licences.module”中 用于访问模态组件。

【参考方案1】：

ReactiveFormsModule 和 FormsModules 在模态模块所在的 SharedModule 中导入（和导出）。

不会像这样工作。模块不会从父母那里继承任何东西。模块应该是自包含的。所以ModalModule 不会从SharedModule 获取表单。

要解决此问题，您可能认为可以将SharedModule 导入ModalModule（以获取表单），但这很有效，因为您将有一个循环依赖并导致它中断。所以你只需要将表单模块直接导入ModalModule，如果你想将它包含在SharedModule中。

【讨论】：

如果在SharedModule 中将FormsModule 添加到exports，他也应该得到他想要的。

@GünterZöchbauer 不是我测试过的，但是你是说如果ModalModule导入SharedModule，只要SharedModule导出FormsModule，那么ModalModule就可以使用FormsModule

比如加BrowserModule就不用加CommonModulegithub.com/angular/angular/blob/…

@GünterZöchbauer 但是您导入应用程序模块的其他模块无权访问该 CommonModule。他们仍然需要自己导入。 OP面临的问题与我之前的评论有关。 OP实际上说他们已经这样做了。我的理解是它不应该工作

您需要导入您以任何方式使用的每个模块，但您不需要直接导入每个模块。您可以通过添加一个导出您使用的所有其他模块的模块来一次导入多个模块。我不会过度使用这种方法，只是想指出这是可能的。