Angular 报错解决

最新推荐文章于 2023-08-15 00:42:53 发布

珍妮的小罐君

最新推荐文章于 2023-08-15 00:42:53 发布

阅读量736

点赞数

文章标签： angular 报错 formGroup

本文链接：https://blog.youkuaiyun.com/qq_36671474/article/details/100032576

版权

在Angular应用中遇到'Can't bind to 'formGroup' since it isn't a known property of 'form''错误？问题可能出在没有同时引入FormsModule和ReactiveFormsModule。同时，如果在Service中使用Http模块，别忘了在app.module.ts中注入HttpModule。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Can't bind to 'formGroup' since it isn't a known property of 'form' 错误描述

当form表单加FormGroup属性时报错 Can't bind to 'formGroup' since it isn't a known property of 'form'

<form [formGroup]="loginForm">
      <div class="form-group">
        <label for="email">Email:</label>
        <input type="email" class="form-control" id="email" placeholder="Enter email">
      </div>
      <div class="form-group">
        <label for="pwd">Password:</label>
        <input type="password" class="form-control" id="pwd" placeholder="Enter password">
      </div>
      <div class="form-check">
        <label class="form-check-label">
          <input class="form-check-input" type="checkbox"> Remember me
        </label>
      </div>
    </form>

原因分析与解决方案

在使用form表单时，如果用到了form-group与formControlName，需要在app.module.ts中的import引入的不仅仅有FormsModule，还要引入ReactiveFormsModule，如下：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { IonicModule } from "@ionic/angular";

import { AppComponent } from './app.component';
import { FooterGuideComponent } from './components/footer-guide/footer-guide.component';
import { AppRoutingModule } from './app-routing.module';
import { ProductListComponent } from './components/product-list/product-list.component';
import { RepaymentComponent } from './components/repayment/repayment.component';



@NgModule({
  declarations: [
    AppComponent,
    FooterGuideComponent,
    ProductListComponent,
    RepaymentComponent
  ],
  imports: [
    AppRoutingModule,
    BrowserModule,
    FormsModule,
    IonicModule.forRoot(),
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[RestService -> Http]:
当在其他service文件中引入http模块时，页面会报错：ERROR Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[ToolService -> Http]:
StaticInjectorError(Platform: core)[ToolService -> Http]:

import { Injectable } from "@angular/core";
import {Http, ResponseContentType} from "@angular/http";
import { Observable, of } from "rxjs";
import {map, switchMap} from "rxjs/operators";

@Injectable()
export class ToolService {
    constructor(private http: Http) {}

    getImgFromLocal(uri): Observable<Blob> {
        return this.http.get(uri, { responseType: ResponseContentType.Blob }).pipe(
            map(resp => resp.blob()),
            map(blob => new Blob([blob], { type: blob.type }))
        );
    }

}

原因分析与解决方案

如果你引用了Http模块，则需要在app.module.ts中的imports中注入HttpModule模块，如下：


import { HttpModule } from '@angular/http';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    AppRoutingModule,
    BrowserModule,
    FormsModule,
    IonicModule.forRoot(),
    ReactiveFormsModule,
    HttpClientModule,
    HttpModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: TranslateLoaderFactory,
        deps: [HttpClient]
      }
    })
  ],
  providers: [
    {
      provide: LOCALE_ID,
      useFactory: LocaleIdFactory
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}