Angular 17中使用ngModel报错，无app.module.ts如何处理？

Angular 17默认采用**独立组件（Standalone Components）**架构，不再依赖传统的app.module.ts，但ngModel依赖的FormsModule仍需显式导入，以下是两种可行的解决方式：

方式一：在独立组件中局部导入FormsModule #

如果你的组件是独立组件（组件装饰器包含standalone: true），直接在组件的imports数组中添加FormsModule即可：

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

@Component({
  selector: 'app-login',
  standalone: true,
  imports: [FormsModule], // 将FormsModule加入组件依赖
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent {
  userLogin = { email: '', password: '' }; // 确保定义绑定对象

  onSignUp() {
    // 处理表单提交逻辑
    console.log('提交的用户信息:', this.userLogin);
  }
}

方式二：在app.config.ts中全局注册FormsModule #

若希望整个应用都能直接使用ngModel，可在应用配置文件中通过importProvidersFrom全局导入FormsModule：

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { importProvidersFrom } from '@angular/core';
import { FormsModule } from '@angular/forms'; // 导入FormsModule

import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    importProvidersFrom(FormsModule) // 全局注册FormsModule
  ]
};

额外注意事项 #

• 必须确保组件中已定义userLogin对象，否则[(ngModel)]会因找不到绑定目标报错。
• 若你仍在使用基于NgModule的旧架构（Angular 17仍支持），可手动创建app.module.ts并在imports数组中加入FormsModule，但更推荐使用独立组件的现代方案。

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