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'

回答

相關問題