報錯描述
在使用form表單的綁定formGroup屬性時,報了個模闆解析錯誤:
Uncaught Error: Template parse errors:
Can't bind to 'formGroup' since it isn't a known property of 'form'
如圖所示:
![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiIn5GcuIDOxAzM1MTMzEjMwkTMwIzLc52YucWbp5GZzNmLn9Gbi1yZtl2Lc9CX6MHc0RHaiojIsJye.png)
html模闆代碼如圖所示:
注: 其中用的是NG-ZORRO元件樣式庫。
原因分析
如果是在使用form時,使用了formGroup和formControlName,則需要引入ReactiveFormsModule,否則會報錯。
解決方案
需要在app.module.ts中引入ReactiveFormsModule,如果是懶加載,則按需在各自的module中引入,我們在展示在app.module.ts中的引入,其他module中相同:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NgZorroAntdModule, NZ_I18N, en_US } from 'ng-zorro-antd';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { registerLocaleData } from '@angular/common';
import en from '@angular/common/locales/en';
import { LoginComponent } from './login/login.component';
registerLocaleData(en);
@NgModule({
declarations: [
AppComponent,
LoginComponent
],
imports: [
BrowserModule,
AppRoutingModule,
NgZorroAntdModule,
FormsModule,
HttpClientModule,
BrowserAnimationsModule,
ReactiveFormsModule //引入ReactiveFormsModule
],
providers: [{ provide: NZ_I18N, useValue: en_US }],
bootstrap: [AppComponent]
})
export class AppModule { }
結語
希望能夠解決大家工作和學習中的一些疑問,避免不必要的時間浪費,有不嚴謹的地方,也請大家批評指正,共同進步!
轉載請注明出處,謝謝!
交流方式:QQ1670765991