[英]Unexpected value 'FusionChartsModule' imported by the module 'AppModule'. Please add a @NgModule annotation
[英]Unexpected value 'FormBuilder' imported by the module 'AppModule'. Please add a @NgModule annotation
如何在 app.module 中添加 formbulder
模块 AppModule 导入的意外值 FormBuilder。 请添加@NgModule 注释。
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule, HTTP_INTERCEPTORS } from "@angular/common/http";
import {FormBuilder, FormControl, FormGroup, Validators, FormsModule} from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ClientComponent } from './client/client.component';
import { ClientTaskComponent } from './clienttask/clienttask.component';
import { ClientService } from './client/sherad/client.service';
@NgModule({
declarations: [
AppComponent, ClientComponent, ClientTaskComponent, ClientService
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
FormsModule,
FormBuilder,
FormGroup,
FormControl
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
imports
数组只接受 Angular 模块。
代替
import {FormBuilder, FormControl, FormGroup, Validators, FormsModule} from '@angular/forms';
只需导入:
import {ReactiveFormsModule} from '@angular/forms';
ReactiveFormsModule
是FormBuilder
、 FormControl
、 FormGroup
、 Validators
等暴露的模块。 因此,要使用它们,您必须在 Angular 模块中导入ReactiveFormsModule
。
并添加仅imports
数组。
@NgModule({
declarations: [
AppComponent, ClientComponent, ClientTaskComponent, ClientService
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
FormsModule,
ReactiveFormsModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
FormBuilder
、 FormControl
、 FormGroup
、 Validators
等,应该只在组件/服务中导入并在那里使用。 它们在 Angular 模块文件中并不是真正需要的。
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { HttpClientModule, HTTP_INTERCEPTORS } from "@angular/common/http"; import {FormBuilder, FormControl, FormGroup, Validators, FormsModule} from '@angular/forms'; ........................///Remove this
import { FormsModule, ReactiveFormsModule } from "@angular/forms";..........//Add this
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ClientComponent } from './client/client.component';
import { ClientTaskComponent } from './clienttask/clienttask.component';
import { ClientService } from './client/sherad/client.service';
@NgModule({
declarations: [
AppComponent, ClientComponent, ClientTaskComponent, ClientService
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
FormsModule,
FormBuilder,.........///Remove this
FormGroup,...........///Remove this
FormControl..........///Remove this
ReactiveFormsModule ..........//Add this
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
并将其导入您的 .ts
import {FormBuilder, FormControl, FormGroup, Validators, FormsModule} from '@angular/forms';
永远记得在
@NgModule
(
声明仅包含组件
进口只包含模块
提供者只包含服务
您不能将 FormBuilder 添加到您的模块中,您只能将这些添加到您的模块中
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
FormsModule,
ReactiveFormsModule
],
在我的代码中工作的真实而简单的解决方案。 只需在该特定模块中评论这两个导入,即在我的代码 HomeModule.ts 中评论这些 //FormsModule, //FormControl
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.