Angular添加方法与服务后注册页面无法加载问题求助

API 探路者

2026-8-3

Angular注册页面无法加载问题解决

问题描述

在Angular应用中实现邮箱认证注册页面，为register.component.html添加onSubmit提交功能，并在register.component.ts和UserService.ts中编写对应方法与服务后，点击路由链接时注册页面无法加载。已知路由无问题（添加代码前运行正常），编译无错误，浏览器控制台报错：

ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(AppModule)[FormBuilder -> FormBuilder -> FormBuilder]:
NullInjectorError: No provider for FormBuilder!

解决方案

报错明确指出FormBuilder缺少提供器，原因是使用了响应式表单（FormBuilder、FormGroup）但未在模块中导入对应依赖模块。

修复步骤

打开根模块文件（通常为app.module.ts）
导入ReactiveFormsModule和FormsModule（模板中用到了[(ngModel)]双向绑定，需同时导入FormsModule）：

import { ReactiveFormsModule, FormsModule } from '@angular/forms';

在@NgModule的imports数组中添加这两个模块：

@NgModule({
  imports: [
    // ...其他已导入模块
    ReactiveFormsModule,
    FormsModule
  ],
  // ...其他模块配置
})
export class AppModule { }

额外优化建议

当前模板混合了模板驱动表单（[(ngModel)]）和响应式表单，建议统一使用响应式表单：
1. 在表单标签上添加[formGroup]="registrationForm"：
```
<form (ngSubmit)="onSubmit()" [formGroup]="registrationForm">
```
1. 将输入框的[(ngModel)]替换为formControlName，比如邮箱输入框修改为：
```
<input type="email" formControlName="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="eg. john@doe.com">
```
这样能更充分利用响应式表单的验证、状态管理能力。