Angular 2 rc.5 原始异常：没有 FormBuilder 的提供程序

typescript

解决 Angular 2 rc.5 中的原始异常：没有 FormBuilder 的提供程序

在使用Angular 2 rc.5版本时，你可能会遇到一个常见的异常：“没有FormBuilder的提供程序”。这个错误通常发生在尝试使用Angular中的响应式表单时，特别是当你尝试使用FormBuilder时。在本文中，我们将深入探讨这个异常的原因，并提供解决方案，以便你能够顺利使用Angular 2 rc.5构建响应式表单。

异常背景

当你尝试在Angular 2 rc.5中使用FormBuilder创建响应式表单时，可能会遇到以下异常：

Error: No provider for FormBuilder!

这个异常的原因是Angular无法找到FormBuilder的提供程序，因此它无法注入到组件中。在Angular中，提供程序是依赖注入系统的一部分，负责将需要的服务注入到组件中。因此，当你尝试在组件中使用FormBuilder时，Angular会检查是否有相应的提供程序，如果没有找到，就会抛出上述异常。

解决方案

要解决这个异常，我们需要确保在我们的应用程序中正确配置了FormBuilder的提供程序。在Angular中，这通常涉及到在模块中导入ReactiveFormsModule并将其添加到imports数组中。

下面是一个简单的例子，演示了如何在Angular组件中使用FormBuilder以及如何解决这个异常：

typescript
// 导入必要的模块
import { Component, NgModule } from '@angular/core';
import { ReactiveFormsModule, FormBuilder, FormGroup } from '@angular/forms';
// 创建组件
@Component({
  selector: 'app-my-form',
  template: <code>
    <form [formGroup]="myForm">
      <!-- 在这里添加表单控件 -->
    </form>
  </code>,
})
export class MyFormComponent {
  // 声明一个 FormGroup
  myForm: FormGroup;
  // 在构造函数中使用 FormBuilder
  constructor(private fb: FormBuilder) {
    // 使用 FormBuilder 创建 FormGroup
    this.myForm = this.fb.group({
      // 在这里添加表单控件
    });
  }
}
// 创建模块并导入 ReactiveFormsModule
@NgModule({
  imports: [ReactiveFormsModule],
  declarations: [MyFormComponent],
})
export class MyModule {}

在上面的代码中，我们首先导入了ReactiveFormsModule，它包含了FormBuilder和其他与响应式表单相关的类。然后，在MyFormComponent组件中，我们在构造函数中注入了FormBuilder，并使用它创建了一个FormGroup，这是一个表示整个表单的抽象。

在使用Angular 2 rc.5构建响应式表单时，确保正确导入和使用ReactiveFormsModule是关键。通过在应用程序模块中导入该模块，你将能够成功使用FormBuilder而不会遇到“没有提供程序”的异常。这个简单的配置步骤将确保你能够轻松地构建和管理Angular中的响应式表单。

通过遵循上述步骤，你应该能够解决“没有FormBuilder的提供程序”异常，并在Angular 2 rc.5中愉快地构建响应式表单。希望这篇文章对你有帮助！