Angular 18无NgModules独立应用如何使用响应式表单

在无NgModule的独立路由应用里，响应式表单的指令（比如formGroup、formControlName）需要通过**导入ReactiveFormsModule**来提供，只不过不再是在app.module.ts里，而是有两种可选方式：

方式一：组件级按需导入（推荐） #

仅在需要使用响应式表单的组件中导入ReactiveFormsModule，这样能避免不必要的包体积增加。

示例代码（以你的业务组件为例）：

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';

@Component({
  selector: 'app-foobar',
  standalone: true,
  imports: [ReactiveFormsModule], // 关键：在这里导入模块
  templateUrl: './foobar.component.html',
  styleUrls: ['./foobar.component.css']
})
export class FoobarComponent implements OnInit {
  foobarForm!: FormGroup;

  ngOnInit(): void {
    this.foobarForm = new FormGroup({
      username: new FormControl(''),
      email: new FormControl('')
    });
  }
}

对应的模板代码可以正常使用绑定：

<form [formGroup]="foobarForm">
  <input type="text" formControlName="username" placeholder="用户名">
  <input type="email" formControlName="email" placeholder="邮箱">
  <button type="submit">提交</button>
</form>

方式二：全局导入（适合多组件使用场景） #

如果你的应用中有大量组件需要用到响应式表单，可以在main.ts的bootstrapApplication配置中全局导入ReactiveFormsModule，这样所有独立组件都无需单独导入即可使用相关指令。

示例代码：

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { provideRouter } from '@angular/router';
import { routes } from './app/app.routes';
import { ReactiveFormsModule } from '@angular/forms';

bootstrapApplication(AppComponent, {
  providers: [provideRouter(routes)],
  imports: [ReactiveFormsModule] // 全局导入
});

注意事项 #

• 组件类中仍然需要单独导入FormControl、FormGroup等类来创建表单实例，这一步你已经完成，无需修改。
• 推荐优先使用组件级导入，保持代码的按需加载特性，优化应用性能。

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