基本概念

Angular 中有两种定义表单的方式：

• 响应式表单：通过底层表单对象 FormControl 和 FormGroup 直接创建和操作表单，可扩展性与可复用性更高。如果表单占据着应用程序的大部分，复杂度较高，推荐使用响应式表单。
• 模板驱动表单：通过指令来创建和操作表单，适用于简单的场景，比如登录表单，可扩展性与可复用性较低。

创建响应式表单

Angular 的两种表单方式对应着两个模块，定义响应式表单需要导入 ReactiveFormsModule 表单库，它主要提供了 FormControl 和 FormGroup 两个对象。
定义模板驱动表单需要导入 FormsModule 表单库，它主要提供了一些模板指令，比如 ngModel、NgForm 等。

所以，要创建响应式表单，首先在模块中导入 ReactiveFormsModule，并添加到 imports 数组中：

例子：

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

// 导入响应式表单模块 ReactiveFormsModule
import { ReactiveFormsModule } from '@angular/forms';

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';
import { FormComponent } from './components/form/form.component';

@NgModule({
  declarations: [
    AppComponent,
    FormComponent
  ],
  imports: [
    BrowserModule,

    // 将 ReactiveFormsModule 添加到 imports 中
    ReactiveFormsModule,

    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

接下来，我们在组件中使用 FormControl 和 FormGroup 对象创建表单:

• FormControl：用于定义单个表单控件，比如一个输入框，是表单中最小的单位。
• FormGroup：大多数表单都拥有多个表单控件，为了便于管理多个 FormControl，引入了 FormGroup。

例子：

form.component.ts

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

// 导入 FormGroup 和 FormControl
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.scss']
})
export class FormComponent implements OnInit {

  myGroup!: FormGroup;

  constructor() { }

  ngOnInit() {

    // 通过 FormGroup 创建表单的基本形式
    // 一个 FormControl 实例对应着 HTML 中的一个表单元素
    // FormControl 中的参数是表单元素的 value 值
    this.myGroup = new FormGroup({
      name: new FormControl('李磊'),
      location: new FormControl('中国')
    });

  }

}

最后，在 HTML 表单元素中使用定义好的 myGroup：

例子：

form.component.html

<!-- 通过 [formGroup] 绑定创建的 myGroup 对象 -->
<form [formGroup]="myGroup">

  <!-- 通过 formControlName 指向相应的 FormControl 对象 -->
  姓名：<input type="text" formControlName="name">
  位置：<input type="text" formControlName="location">
</form>

到这里，我们就创建好了一个最基本的响应式表单：

创建嵌套的响应式表单

创建嵌套的响应式表单也很简单，只需要创建嵌套的 FormGroup 即可。

例子：

form.component.ts

this.myGroup = new FormGroup({
  name: new FormControl('李磊'),

  // 嵌套 FormGroup
  detailed: new FormGroup({
    sex: new FormControl('男'),
    age: new FormControl('20'),
  }),
  
  location: new FormControl('中国')
});

form.component.html

<form [formGroup]="myGroup">
  <ul>
    <li>
      姓名：<input type="text" formControlName="name">
    </li>

    <!-- 通过 formGroupName 指向嵌套的 FormGroup 对象 -->
    <li formGroupName="detailed">
      <ul>
        <li>
          性别：<input type="text" formControlName="sex">
        </li>
        <li>
          年龄：<input type="text" formControlName="age">
        </li>
      </ul>
    </li>
    
    <li>
      位置：<input type="text" formControlName="location">
    </li>
  </ul> 
</form>

创建响应式表单的最佳实践

响应式表单通过 FormControl 和 FormGroup 创建，而我们接下来介绍的 FormBuilder，是这两者的语法糖，提供了更为简单灵活的创建表单的方式。

FormBuilder 有两个主要方法：

• control()：用于创建 FormControl
• group()：用于创建 FormGroup

下面我们使用 FormBuilder 重构 form.component.ts 中的表单：

例子：

form.component.ts

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

// 导入 FormBuilder
import { FormGroup, FormControl, FormBuilder } from '@angular/forms';

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.scss']
})
export class FormComponent implements OnInit {

  myGroup!: FormGroup;

  constructor(
    // 初始化 FormBuilder
    private fb: FormBuilder,
  ) { }

  ngOnInit() {
    
    // 使用 FormBuilder 中的 group() 方法创建 FormGroup
    // 使用 FormBuilder 中的 control() 方法创建 FormControl
    // 更为常见的方法是使用键值对替代 FormControl
    this.myGroup = this.fb.group({
        name:this.fb.control('李磊'), //'李磊'
        detailed:this.fb.group({
          sex:'男',
          age:'20'
        }),
        location:'中国'
    });

  }

}

end