Angular2：由于它不是'form'的已知属性，因此无法绑定到'formGroup'

我是angular 2中的新手，我尝试做出反应形式，但是我遇到了一些麻烦。经过多次搜索后，我发现没有解决方案。Angular2：由于它不是'form'的已知属性，因此无法绑定到'formGroup'

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

代码：

查看：

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

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的导入在这里。所以...我需要你的帮助:)谢谢

当我阅读你的答案并重构我的代码后，没关系，那可行！问题是我在我的页面联系人的模块中导入反应模块，我需要将其导入到我的应用程序的模块中。所以，非常感谢你的兴趣:)

希望这个答案帮助另一个人的家伙。

来源

2017-04-06 Cyril

删除'FormGroup'和'FormControl' FOM的进口在ngModule ...... – Alex

你有很多，你必须去除过多其他错误。 –

为什么模块的'imports'数组中的'NgModule'，'FormGroup'和'FormControl'？ – n00dl3

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

你的模块应该是：

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

来源

2017-04-06 08:13:37 n00dl3

感谢您的回复，但它不起作用。 – Cyril

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

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

尝试在你的组件添加ReactiveFormsModule为好。

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

来源

2017-07-07 16:58:46

是的，这有效 –

Angular2：由于它不是'form'的已知属性，因此无法绑定到'formGroup'

回答

相关问题