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-09-01 02:38:58

【问题描述】：

我是 Angular 2 的新手，我尝试制作一种反应形式，但我遇到了一些麻烦。在堆栈中多次搜索后，我没有找到解决方案。

在这里你可以看到我的错误

代码：

查看：

    <main>
        <div class="container">
            <h2>User data</h2>
            <form [formGroup]="userForm">
                <div class="form-group">
                    <label>name</label>
                    <input type="text" class="form-control" formControlName="name">
                </div>
                <div class="form-group">
                    <label>email</label>
                    <input type="text" class="form-control" formControlName="email">
                </div>
                <div class="" formGroupName="adresse">
                    <div class="form-group">
                        <label>Rue</label>
                        <input type="text" class="form-control" formControlName="rue">
                    </div>
                    <div class="form-group">
                        <label>Ville</label>
                        <input type="text" class="form-control" formControlName="ville">
                    </div>
                    <div class="form-group">
                        <label>Cp</label>
                        <input type="text" class="form-control" formControlName="cp">
                    </div>
                </div>
                <button type="submit" class="btn btn-primary">Submit</button>
            </form>
        </div>
    </main>

我的模块.ts

    import  NgModule       from '@angular/core';
    import  CommonModule   from '@angular/common';
    import  BrowserModule  from '@angular/platform-browser';
    import  ContactComponent  from './contact.component';
    import  FormGroup , FormControl , ReactiveFormsModule , FormsModule  from '@angular/forms';
    
    
    @NgModule(
      imports: [
        NgModule,
        BrowserModule,
        FormsModule,
        ReactiveFormsModule,
        FormGroup,
        FormControl
      ],
      declarations: [
        ContactComponent
      ]
    )
    export class ContactModule 



And my component.ts

    import Component from '@angular/core';
    import  FormGroup , FormControl  from '@angular/forms';
    
    @Component(
      selector: 'contact',
      templateUrl: './contact.component.html'
      // styleUrls: ['../../app.component.css']
    )
    export class ContactComponent 
    
        userForm = new FormGroup(
            name: new FormControl(),
            email: new FormControl(),
            adresse: new FormGroup(
                rue: new FormControl(),
                ville: new FormControl(),
                cp: new FormControl(),
            )
        );
    

我不明白我的错误，因为这里是 ReactiveForm 的导入。所以...我需要你的帮助:) 谢谢

在我阅读了您的答案并重构了我的代码之后，没关系，这行得通！问题是我在我的页面联系人模块中导入反应模块，我需要在我的应用程序模块中导入它。非常感谢您的关注:)

希望这个答案能帮助其他人。

【问题讨论】：

从 ngModule 中的导入中删除 FormGroup 和 FormControl...

您还有很多其他错误需要删除。

为什么NgModule,FormGroup和FormControl在你的模块的imports数组中？

您的代码似乎运行良好，看看与这个 plunker 有什么不同。 plnkr.co/edit/mSLpeHxUzjT6bxcEO3zi?p=preview

@Pengyy 我认为他完全忽略了他的代码无法编译的事实，所以浏览器无论如何都会重新加载，但这仍然是他试图用这些奇怪的导入来修复的错误。

【参考方案1】：

我认为这是您尝试通过在模块中导入随机内容来修复的旧错误，现在代码不再编译。当你不注意shell输出时，浏览器重新加载，你仍然会得到同样的错误。

你的模块应该是：

@NgModule(
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule
  ],
  declarations: [
    ContactComponent
  ]
)
export class ContactModule 

【讨论】：

任何输出（在 shell 中，而不是浏览器控制台中）？

我也会导入 CommonModule 而不是 BrowserModule，因为 ContactModule 看起来不像根模块

@yurzui 没关系，如果它不是延迟加载的，但谁知道呢？我编辑了。

必须有一个，这是唯一的解释。请再次运行您用于启动编译的命令并将整个输出发布到您的问题中。

没关系，它的工作。这只是我的代码与我的不同页面的混乱。阅读您的答案并修改我的代码后，就可以了。非常感谢

【参考方案2】：

尝试在你的组件中添加 ReactiveFormsModule。

import  FormGroup, FormArray, FormBuilder,
          Validators,ReactiveFormsModule   from '@angular/forms';

【参考方案3】：

我已经通过在 shared.module 中导入 FormModule 并在所有其他模块中导入 shared.module 来解决它。我的情况是 FormModule 在多个模块中使用。

【参考方案4】：

试试

<form formGroup="userForm">

而不是

<form [formGroup]="userForm">

【讨论】：

它会给什么？

【参考方案5】：

我遇到了同样的问题，我用另一种方式解决了这个问题，没有导入 ReactiveFormsModule。 你可能是，但这个块在

ngOnInt()

    userForm = new FormGroup(
        name: new FormControl(),
        email: new FormControl(),
        adresse: new FormGroup(
            rue: new FormControl(),
            ville: new FormControl(),
            cp: new FormControl(),
        )
     );
)

【参考方案6】：

对于那些仍在为错误而苦苦挣扎的人，请确保您还在组件的 module.ts 文件中导入 ReactiveFormsModule

意味着您将在 app.module.ts 以及 mycomponent.module.ts 文件中导入 ReactiveFormsModule

【参考方案7】：

将 ReactiveForms 模块导入您的组件模块

【讨论】：

您好，欢迎来到 SO！请阅读***.com/tour和***.com/help/how-to-answer