Angular 18.0.4：task组件无法导入FormsModule及ngModel绑定错误求助

错误提示"Can't bind to 'ngModel' since it isn't a known property of 'input'"的核心原因是：[(ngModel)]属于@angular/forms包中的FormsModule，必须在组件的依赖导入中声明该模块才能使用，不能直接在组件类文件中单独导入。

分两种场景处理： #

场景1：项目使用NgModule结构

1. 找到Task组件所属的模块文件（如task.module.ts或app.module.ts）
2. 在模块的imports数组中添加FormsModule，示例代码：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms'; // 导入FormsModule

import { TaskComponent } from './task/task.component';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent, TaskComponent],
  imports: [BrowserModule, FormsModule], // 加入到imports数组
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

场景2：Task是独立组件（Angular 14+默认支持）

如果你的TaskComponent是独立组件（装饰器包含standalone: true），直接在组件的imports数组中添加FormsModule，修改task.component.ts：

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-task',
  standalone: true,
  imports: [FormsModule], // 这里添加FormsModule
  templateUrl: './task.component.html',
  styleUrls: ['./task.component.css']
})
export class TaskComponent {
  newTask = { description: '' }; // 确保newTask对象已定义
}

额外注意事项 #

• 若项目未安装@angular/forms，执行命令：npm install @angular/forms
• 确保TaskComponent中已正确定义newTask对象，避免出现undefined相关错误

内容的提问来源于stack exchange，提问作者Mani