如何在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
(
声明仅包含组件
导入仅包含模块
providers仅包含services
您无法将 FormBuilder 添加到您的模块中,您只能将这些添加到您的模块中
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
FormsModule,
ReactiveFormsModule
],
在我的代码中有效的真实而简单的解决方案。只需在该特定模块中(即在我的代码 HomeModule.ts 中)评论这两个导入 评论这些 //表单模块, //表单控件
将 Angular 项目从非 Ivy 版本升级到使用 Ivy 版本时,由于缓存的构建工件或项目中残留的旧依赖项,可能会出现此类问题。这是我的情况,这对我有用:
rm -rf node_modules
rm -rf .angular/cache
这个过程解决了我从非Ivy版本升级到Ivy过程中遇到的问题。