Angular2:无法绑定到"formGroup"，因为它不是"form"的已知属性 [英] Angular2 : Can't bind to 'formGroup' since it isn't a known property of 'form'

问题描述

我是angular 2的新手，我尝试做出反应式，但遇到了一些麻烦.在堆栈中进行多次搜索后，我没有找到解决方案.

I'm new in angular 2 and i try to make a reactive form but i have some trouble. After many search in stack i found no solutions.

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

Here you can see my error

代码:

查看:

<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 {}

还有我的component.ts

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.所以...我需要您的帮助:)谢谢

I don't understand my error because import of ReactiveForm is here. So ... i need your help :) Thanks

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

After I read your answer and refactoring my code, it's ok, that works! The problem was i import reactive module in the module of my page contact and i need import this in module of my app. So thanks a lot for your interest :)

希望这个答案可以帮助其他人.

Hope this answer help another people guys.

推荐答案

我认为这是一个旧错误，您尝试通过在模块中导入随机内容来解决，现在代码不再编译.尽管您不注意shell输出，但浏览器会重新加载，并且仍然会出现相同的错误.

I think that this is an old error that you tried to fix by importing random things in your module and now the code does not compile anymore. while you don't pay attention to the shell output, the browser reload, and you still get the same error.

您的模块应为:

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

这篇关于Angular2:无法绑定到"formGroup"，因为它不是"form"的已知属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！