Angular2: не может связываться с 'formGroup', поскольку это не известное свойство 'form'

Я новичок в 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>

Мой 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 {}

И мой компонент .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 здесь. Итак... мне нужна ваша помощь:) Спасибо

После того, как я прочитал ваш ответ и рефакторинг моего кода, все в порядке, это работает! Проблема заключалась в том, что я импортировал реактивный модуль в модуле моего контакта с страницей, и мне нужно импортировать это в модуль моего приложения. Так что спасибо за ваш интерес:)

Надеюсь, что этот ответ поможет другим людям.

Ответ 1

Я думаю, что это старая ошибка, которую вы пытались исправить, импортируя случайные вещи в свой модуль, и теперь код больше не компилируется. в то время как вы не обращаете внимание на вывод оболочки, перезагрузка браузера, и вы по-прежнему получаете ту же ошибку.

Ваш модуль должен быть:

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

Ответ 2

попробуй с

<form formGroup="userForm">

вместо

<form [formGroup]="userForm">

Ответ 3

Попробуйте добавить ReactiveFormsModule в ваш компонент.

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

Ответ 4

Не используйте userForm = new FormGroup()

form = new FormGroup() этого используйте form = new FormGroup().

А в форме используйте <form [formGroup]="form">...</form>. У меня работает с угловой 6

Ответ 5

Я решил это, импортировав FormModule в shared.module и импортировав shared.module во все остальные модули. В моем случае FormModule используется в нескольких модулях.

Ответ 6

У меня была такая же проблема, и я решил проблему по-другому, без импорта ReactiveFormsModule. Вы можете быть, но этот блок в

ngOnInt(){

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

Ответ 7

Для тех, кто все еще борется с ошибкой, убедитесь, что вы также импортировали ReactiveFormsModule в свой файл module.ts компонента

Это означает, что вы будете импортировать свой ReactiveFormsModule в ваш app.module.ts, а также в ваш файл mycomponent.module.ts