Angular 4由於它不是'form'的已知屬性，因此無法綁定到'formGroup'

我是使用Angular 4的新手。我試圖在角度4中練習模型驅動的表單，但它不斷獲取此錯誤。Angular 4由於它不是'form'的已知屬性，因此無法綁定到'formGroup'

Template parse errors: Can't bind to 'formGroup' since it isn't a known property of 'form'. (" ][formGroup] = "form" (ngSubmit)="onSubmit(form.value)"> "): ng:///ComponentsModule/[email protected]:38 Error: Template parse errors: Can't bind to 'formGroup' since it isn't a known property of 'form'. (" ][formGroup] = "form" (ngSubmit)="onSubmit(form.value)">

我試着搜索它的問題如何解決。大多數解決方案是通過在模塊中導入ReactiveFormsModule。這裏是我的component.ts

import { Component, Input, OnChanges, SimpleChange } from '@angular/core'; 
import { FormGroup, FormControl, ReactiveFormsModule } from '@angular/forms'; 

import { HttpClient, HttpErrorResponse } from '@angular/common/http';                                       


@Component({ 
    templateUrl: 'ads.component.html' 
}) 
export class AdsComponent { 
    form; 
    ngOnInit() { 
     this.form = new FormGroup({ 
      ads_name: new FormControl("Hello Ads!") 
     }); 
    } 

    constructor(
    private http: HttpClient 
    ) { 

    } 

    onSubmit = function(user) { 
     console.log(user); 
    } 

}

代碼，這裏是我的component.html

<form class="form-horizontal" [formGroup] = "form" (ngSubmit)="onSubmit(form.value)"> 
    <div class="form-group row"> 
     <label class="col-md-3 form-control-label" for="ads_name">Ads Name</label> 
     <div class="col-md-9"> 
      <input type="text" id="ads_name" name="ads_name" class="form-control" placeholder="Ads Name" formControlName="ads_name" ngModel> 
     </div> 
    </div> 
</form>

，這裏的代碼是我模塊

import { ReactiveFormsModule, FormsModule } from '@angular/forms'; 

@NgModule({ 
    imports: [ 
    BrowserModule, 
    AppRoutingModule, 
    BsDropdownModule.forRoot(), 
    TabsModule.forRoot(), 
    ChartsModule, 
    ReactiveFormsModule, 
    HttpClientModule, 
    FormsModule 
    ],

來源

2017-09-15 Jayz de Vera

哪個模塊你''AdsComponent在？ –

我的組件文件夾中有一個獨立的組件模塊，它位於我的視圖文件夾裏面的應用程序中分開 –

如上代碼您的錯誤狀態：

Template parse errors: Can't bind to 'formGroup' since it isn't a known property of 'form'. (" ][formGroup] = "form" (ngSubmit)="onSubmit(form.value)"> "): ng:///ComponentsModule/[email protected]

我們可以假設您的AdsComponent是ComponentsModule聲明的一部分，但您已在AppModule中導入ReactiveFormsModule。因此，爲了角就能編譯AdsComponent模板，你應該：

1）無論是進口ReactiveFormsModule在ComponentsModule：

@NgModule({ 
    imports: [ 
    ... 
    ReactiveFormsModule 
    ] 
}) 
export class ComponentsModule {}

2）或輸入模塊是出口ReactiveFormModule

@NgModule({ 
    exports: [ 
    ... 
    ReactiveFormsModule 
    ] 
}) 
export class SharedModule {} 

@NgModule({ 
    imports: [ 
    ... 
    SharedModule 
    ] 
}) 
export class ComponentsModule {}

另見：

Angular 2 Use component from another module

來源

2017-09-15 04:22:09 yurzui

它解決了錯誤。但是這又是一個錯誤。這是ControlContainer的錯誤No提供者。但我會嘗試看看你給出的鏈接 –

這個錯誤與該答案無關。你在模板中做錯了什麼 – yurzui

我們可以在聊天室中進行對話嗎？如果你有麻煩抱歉。 –

請將ReactiveFormsModule聲明爲測試模塊的一部分。

beforeEach(() => { 
    TestBed.configureTestingModule({ 
     imports: [ReactiveFormsModule], 
     declarations: [YourComponent, ...], 
     providers: [...] 
    }); 
});

來源

2018-03-08 17:41:37

Angular 4由於它不是'form'的已知屬性，因此無法綁定到'formGroup'

回答

相關問題