Angular2： 'form'のプロパティが知られていないため、 'formGroup'にバインドできません

Question

私はアンゲラ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> 

マイmodule.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 {} 

そして私の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のインポートがここにあるので私は理解しません。だから...私はあなたの助けが必要です:)ありがとう

私はあなたの答えを読んで、私のコードをリファクタリングした後、それは正常です！問題は私のページの連絡先のモジュールで私は反応モジュールをインポートし、私は私のアプリのモジュールでこれをインポートする必要があります。あなたの興味のために多くのありがとう:)

この回答が他の人の助けを願っています。

Answer 1

これは、あなたがモジュール内でランダムなものをインポートすることによって修正しようとした古いエラーで、コードはもうコンパイルされないと思います。シェルの出力に注意を払わずに、ブラウザがリロードしても、同じエラーが表示されます。

あなたのモジュールは次のようになります。

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

Answer 2

は同様にあなたのコンポーネントでReactiveFormsModuleを追加してください。

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