Angular2:无法绑定到“窗体组”，因为它不是“窗体”的已知属性

Question

我在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>

    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(),
            })
        });
    }

希望这个答案能帮助别人。

Answer 1

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

您的模块应该是：

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