Angular 中有两种定义表单的方式:
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 对象创建表单:
例子:
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 有两个主要方法:
下面我们使用 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