【Angular】响应式表单（Reactive Forms）-优快云博客

响应式表单（Reactive Forms）是 Angular 中处理表单的一种方式，使用时表单的控件（如输入框、选择框等）以及表单的结构都由代码控制，而不是由模板驱动。响应式表单提供了更强大的功能，适合用于复杂的表单操作，如动态表单、条件验证、表单值的处理等。

响应式表单的核心思想是 通过代码来定义和管理表单结构，并且可以直接操作表单数据和状态，适用于需要更多控制和自定义的场景。

1. 响应式表单的基本概念

响应式表单由以下几个主要部分组成：

FormControl：表示表单控件（例如，输入框、复选框等）的单个值和状态。
FormGroup：是一个包含多个 FormControl 或 FormGroup 的集合，表示一个表单的结构。
FormArray：是一个 FormControl 的集合，适用于有多个类似控件的场景（例如，动态生成多个表单控件）。
Validators：表单验证规则，用来控制表单控件的合法性。
FormBuilder：是一个简化表单创建的服务，提供了一些方便的方法来构建表单控件和表单组。

2. 创建响应式表单

响应式表单通常通过 FormControl、FormGroup 和 FormArray 来定义表单的控件和结构。

2.1 安装和导入 `ReactiveFormsModule`

在使用响应式表单之前，需要在 Angular 模块中导入 ReactiveFormsModule：

import {
   
    NgModule } from '@angular/core';
import {
   
    BrowserModule } from '@angular/platform-browser';
import {
   
    ReactiveFormsModule } from '@angular/forms'; // 导入 ReactiveFormsModule

import {
   
    AppComponent } from './app.component';

@NgModule({
   
   
  declarations: [AppComponent],
  imports: [BrowserModule, ReactiveFormsModule], // 添加到 imports 中
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {
   
   }

2.2 创建表单控件（FormControl）

FormControl 是 Angular 响应式表单的基本单位，表示一个表单控件的值和状态。例如：

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

@Component({
   
   
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppCompon