已导入FormsModule但ngModel仍报错的Angular技术问题求助

核心问题：错误导入NgModule到imports数组 #

你的app.module.ts存在关键错误：将NgModule（这是Angular的装饰器，并非可导入的模块）添加到了imports数组中，这会干扰FormsModule的正常加载，导致[(ngModel)]无法被识别。

修改后的app.module.ts代码 #

import { NgModule } from '@angular/core';
import { CalendarModule } from 'primeng/calendar';
import { AppComponent } from './app.component';
import { CommonModule } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule } from '@angular/forms';

@NgModule({
    declarations: [AppComponent],
    // 移除imports里的NgModule，它不属于模块导入列表
    imports: [CalendarModule, CommonModule, HttpClientModule, FormsModule],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

必查验证点：组件中需初始化绑定对象 #

在AppComponent类中，必须提前初始化nuevoCliente对象，否则Angular会抛出“无法读取未定义属性”的错误。

组件示例代码 #

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  // 初始化绑定对象，可按需设置属性默认值
  nuevoCliente = {
    nombre: '',
    apellidos: '',
    calle: '',
    email: '',
    numTelefono: ''
  };

  agregarCliente() {
    // 编写表单提交逻辑
    console.log(this.nuevoCliente);
  }
}

额外验证步骤 #

• 重启开发服务器：修改模块配置后，重启ng serve确保变更生效；
• 版本兼容性确认：若使用Angular 14+的独立组件，需在组件自身的imports数组中添加FormsModule，但你的代码基于NgModule架构，此条可忽略。

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