Angular 修复 - 无法绑定到 formGroup，因为它不是表单的已知属性答案

【问题标题】：Angular fix - Can't bind to formGroup since it isn't a known property of formAngular 修复 - 无法绑定到 formGroup，因为它不是表单的已知属性
【发布时间】：2021-04-28 19:49:21
【问题描述】：

我喜欢使用 Angular ReactiveFormsModule 创建一个表单。我在构建应用程序时收到此错误消息：

Can't bind to 'formGroup' since it isn't a known property of 'form'

我已经用谷歌搜索了这条错误消息并找到了以下解决方案： Can't bind to 'formGroup' since it isn't a known property of 'form'

Can't bind to 'formGroup' since it isn't a known property of 'form' in Angular 8

很遗憾，我无法通过这些建议解决我的问题。

[编辑]

我为我的问题创建了一个最小的项目。请问有人可以看看吗？

https://github.com/Christoph1972/test-reactive-forms.git

我花了这么多时间才找到问题，显然我无法解决它......

[/编辑]

我的问题是什么？恐怕解决方案会很简单，但我是 Angular 新手。

【问题讨论】：

前几天我创建了一个演示项目来学习使用 ReactiveForms。该项目按预期运行。我逐步比较了所有引用，并使用 Visual Studio Code 中的“在文件中查找”功能来查找对 FormsModule 和 ReactiveFormsModule 的遗忘/隐藏引用。在我看来，这两个项目之间没有区别。她能出什么问题？有没有人有想法找到问题？我敢肯定，一个非常小的变化就足以解决这个问题。 :-\
您已将表单变量声明为 myForm!: FormGroup; ，但在其他地方它只是 myForm。您声明的变量名称是否与 html 中给出的变量名称相同？
嗨 Vna，我使用“非空断言运算符”来声明 myForm，这意味着 myForm！ : 表单组。
我在 GitHub 上添加了一个演示项目。
@Christoph1972 你能做一个stackblitz吗here

标签： angular angular-reactive-forms

【解决方案1】：

你忘记在你的 app.module 中包含 TestModModule

import {TestModModule} from './test-mod/test-mod.module'
...
imports: [
    ...
    TestModModule
  ],

顺便说一句，您可以在表单中使用*ngIf以避免缩写错误

<form *ngIf="myForm" [formGroup]="myForm">
   ...
</form>

【讨论】：

天哪，完全专注于错误消息。我只是在寻找与 ReactiveFormsModule 相关的案例。太痛苦了，我花了很多时间来解决这个问题。 :-/ 为什么 RouterOulet 在 HTML 文件中不使用 [formGroup]="myForm" 就可以工作？非常感谢您的支持！