Angular13 Angular 响应式表单

注册响应式表单模块

要使用响应式表单控件，就要从 @angular/forms包中导入 ReactiveFormsModule，并把它添加到你的 NgModule 的 imports数组中。

import { ReactiveFormsModule } from '@angular/forms';
@NgModule({
  imports: [
    // other imports ...
    ReactiveFormsModule
  ],
})
export class AppModule { }

生成新的 FormControl

使用 CLI 命令 ng generate在项目中生成一个组件作为该表单控件的宿主。

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
@Component({
  selector: 'app-name-editor',
  templateUrl: './name-editor.component.html',
  styleUrls: ['./name-editor.component.css']
})
export class NameEditorComponent {
  name = new FormControl('');
}

可以用 ​FormControl ​的构造函数设置初始值，这个例子中它是空字符串。通过在你的组件类中创建这些控件，你可以直接对表单控件的状态进行监听、修改和校验。

在模板中注册该控件

<label for="name">Name: </label>
<input id="name" type="text" [formControl]="name">

显示该组件

把该组件添加到模板时，将显示指派给 ​name ​的表单控件。

<app-name-editor></app-name-editor>

表单分组

定义了一个带有一组控件的表单，你可以把它们放在一起管理。表单组的基础知识将在本节中讨论。你也可以通过嵌套表单组来创建更复杂的表单。

表单数组

定义了一个动态表单，你可以在运行时添加和删除控件。你也可以通过嵌套表单数组来创建更复杂的表单。

创建一个 FormGroup实例。

在组件类中创建一个名叫 ​profileForm ​的属性，并设置为 ​FormGroup ​的一个新实例。要初始化这个 ​FormGroup​，请为构造函数提供一个由控件组成的对象，对象中的每个名字都要和表单控件的名字一一对应。

对此个人档案表单，要添加两个 ​FormControl ​实例，名字分别为 ​firstName ​和 ​lastName​。

import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
@Component({
  selector: 'app-profile-editor',
  templateUrl: './profile-editor.component.html',
  styleUrls: ['./profile-editor.component.css']
})
export class ProfileEditorComponent {
  profileForm = new FormGroup({
    firstName: new FormControl(''),
    lastName: new FormControl(''),
  });
}

这些独立的表单控件被收集到了一个控件组中。这个 ​FormGroup ​用对象的形式提供了它的模型值，这个值来自组中每个控件的值。​FormGroup ​实例拥有和 ​FormControl ​实例相同的属性（比如 ​value​、​untouched​）和方法（比如 ​setValue()​）。

把这个 FormGroup模型关联到视图。

这个表单组还能跟踪其中每个控件的状态及其变化，所以如果其中的某个控件的状态或值变化了，父控件也会发出一次新的状态变更或值变更事件。该控件组的模型来自它的所有成员。在定义了这个模型之后，你必须更新模板，来把该模型反映到视图中。

<form [formGroup]="profileForm">
  <label for="first-name">First Name: </label>
  <input id="first-name" type="text" formControlName="firstName">
  <label for="last-name">Last Name: </label>
  <input id="last-name" type="text" formControlName="lastName">
</form>

NOTE:
就像 ​FormGroup ​所包含的那控件一样，profileForm 这个 ​FormGroup ​也通过 ​FormGroup ​指令绑定到了 ​form ​元素，在该模型和表单中的输入框之间创建了一个通讯层。

由 ​FormControlName ​指令提供的 ​formControlName ​属性把每个输入框和 ​FormGroup ​中定义的表单控件绑定起来。这些表单控件会和相应的元素通讯，它们还把更改传给 ​FormGroup​，这个 ​FormGroup ​是模型值的事实之源。

保存表单数据

​ProfileEditor ​组件从用户那里获得输入，但在真实的场景中，你可能想要先捕获表单的值，等将来在组件外部进行处理。​FormGroup ​指令会监听 ​form ​元素发出的 ​submit ​事件，并发出一个 ​ngSubmit ​事件，让你可以绑定一个回调函数。把 ​onSubmit()​ 回调方法添加为 ​form ​标签上的 ​ngSubmit ​事件监听器。

<form [formGroup]="profileForm" (ngSubmit)="onSubmit()">

​ProfileEditor ​组件上的 ​onSubmit()​ 方法会捕获 ​profileForm ​的当前值。要保持该表单的封装性，就要使用 ​EventEmitter ​向组件外部提供该表单的值。下面的例子会使用 ​console.warn​ 把这个值记录到浏览器的控制台中。

onSubmit() {
  // TODO: Use EventEmitter with form value
  console.warn(this.profileForm.value);
}

​form ​标签所发出的 ​submit ​事件是内置 DOM 事件，通过点击类型为 ​submit ​的按钮可以触发本事件。这还让用户可以用回车键来提交填完的表单。往表单的底部添加一个 ​button​，用于触发表单提交。

<p>Complete the form to enable button.</p>
<button type="submit" [disabled]="!profileForm.valid">Submit</button>

注意：
上面这个代码片段中的按钮还附加了一个 ​disabled ​绑定，用于在 ​profileForm ​无效时禁用该按钮。目前你还没有执行任何表单验证逻辑，因此该按钮始终是可用的。

显示此组件

要显示包含此表单的 ​ProfileEditor ​组件，请把它添加到组件模板中。

<app-profile-editor></app-profile-editor>

​ProfileEditor ​让你能管理 ​FormGroup ​中的 ​firstName ​和 ​lastName ​等 ​FormControl ​实例。

创建一个嵌套的表单组。

要在 profileForm 中创建一个嵌套组，就要把一个嵌套的 address 元素添加到此表单组的实例中。

import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
@Component({
  selector: 'app-profile-editor',
  templateUrl: './profile-editor.component.html',
  styleUrls: ['./profile-editor.component.css']
})
export class ProfileEditorComponent {
  profileForm = new FormGroup({
    firstName: new FormControl(''),
    lastName: new FormControl(''),
    address: new FormGroup({
      street: new FormControl(''),
      city: new FormControl(''),
      state: new FormControl(''),
      zip: new FormControl('')
    })
  });
}

在这个例子中，​address group​ 把现有的 ​firstName​、​lastName ​控件和新的 ​street​、​city​、​state ​和 ​zip ​控件组合在一起。虽然 ​address ​这个 ​FormGroup ​是 ​profileForm ​这个整体 ​FormGroup ​的一个子控件，但是仍然适用同样的值和状态的变更规则。来自内嵌控件组的状态和值的变更将会冒泡到它的父控件组，以维护整体模型的一致性。

在模板中对这个嵌套表单分组。

<div formGroupName="address">
  <h2>Address</h2>
  <label for="street">Street: </label>
  <input id="street" type="text" formControlName="street">
  <label for="city">City: </label>
  <input id="city" type="text" formControlName="city">
  <label for="state">State: </label>
  <input id="state" type="text" formControlName="state">
  <label for="zip">Zip Code: </label>
  <input id="zip" type="text" formControlName="zip">
</div>

setValue()

使用 setValue()方法来为单个控件设置新值。setValue()方法会严格遵循表单组的结构，并整体性替换控件的值。

patchValue()

使用 patchValue()方法可以用对象中所定义的任何属性为表单模型进行替换。

导入 FormBuilder 类

import { FormBuilder } from '@angular/forms';

注入 FormBuilder 服务

​FormBuilder ​是一个可注入的服务提供者，它是由 ​ReactiveFormModule ​提供的。只要把它添加到组件的构造函数中就可以注入这个依赖。

constructor(private fb: FormBuilder) { }

生成表单控件

​FormBuilder ​服务有三个方法：​control()​、​group()​ 和 ​array()​。这些方法都是工厂方法，用于在组件类中分别生成 ​FormControl​、​FormGroup ​和 ​FormArray​。

import { Component } from '@angular/core';
import { FormBuilder } from '@angular/forms';
@Component({
  selector: 'app-profile-editor',
  templateUrl: './profile-editor.component.html',
  styleUrls: ['./profile-editor.component.css']
})
export class ProfileEditorComponent {
  profileForm = this.fb.group({
    firstName: [''],
    lastName: [''],
    address: this.fb.group({
      street: [''],
      city: [''],
      state: [''],
      zip: ['']
    }),
  });
  constructor(private fb: FormBuilder) { }
}

在上面的例子中，你可以使用 ​group()​ 方法，用和前面一样的名字来定义这些属性。这里，每个控件名对应的值都是一个数组，这个数组中的第一项是其初始值。

比较一下用表单构建器和手动创建实例这两种方式。

• src/app/profile-editor/profile-editor.component.ts (instances)

profileForm = new FormGroup({
  firstName: new FormControl(''),
  lastName: new FormControl(''),
  address: new FormGroup({
    street: new FormControl(''),
    city: new FormControl(''),
    state: new FormControl(''),
    zip: new FormControl('')
  })
});

profileForm = this.fb.group({
  firstName: [''],
  lastName: [''],
  address: this.fb.group({
    street: [''],
    city: [''],
    state: [''],
    zip: ['']
  }),
});

导入验证器函数

响应式表单包含了一组开箱即用的常用验证器函数。这些函数接收一个控件，用以验证并根据验证结果返回一个错误对象或空值。

从 ​@angular/forms​ 包中导入 ​Validators ​类。

import { Validators } from '@angular/forms';

建一个必填字段

在 ​ProfileEditor ​组件中，把静态方法 ​Validators.required​ 设置为 ​firstName ​控件值数组中的第二项。

profileForm = this.fb.group({
  firstName: ['', Validators.required],
  lastName: [''],
  address: this.fb.group({
    street: [''],
    city: [''],
    state: [''],
    zip: ['']
  }),
});

显示表单状态

<p>Form Status: {{ profileForm.status }}</p>

提交按钮被禁用了，因为 ​firstName ​控件的必填项规则导致了 ​profileForm ​也是无效的。在你填写了 ​firstName ​输入框之后，该表单就变成了有效的，并且提交按钮也启用了。

导入 ​​FormArray​​ 类

从 ​@angular/form​ 中导入 ​FormArray​，以使用它的类型信息。​FormBuilder ​服务用于创建 ​FormArray ​实例。

import { FormArray } from '@angular/forms';

定义 FormArray 控件

你可以通过把一组（从零项到多项）控件定义在一个数组中来初始化一个 ​FormArray​。为 ​profileForm ​添加一个 ​aliases ​属性，把它定义为 ​FormArray ​类型。

使用 ​FormBuilder.array()​ 方法来定义该数组，并用 ​FormBuilder.control()​ 方法来往该数组中添加一个初始控件。

profileForm = this.fb.group({
  firstName: ['', Validators.required],
  lastName: [''],
  address: this.fb.group({
    street: [''],
    city: [''],
    state: [''],
    zip: ['']
  }),
  aliases: this.fb.array([
    this.fb.control('')
  ])
});

FormGroup ​中的这个 ​aliases ​控件现在管理着一个控件，将来还可以动态添加多个。

访问 FormArray 控件

get aliases() {
  return this.profileForm.get('aliases') as FormArray;
}

注意：
因为返回的控件的类型是 ​AbstractControl​，所以你要为该方法提供一个显式的类型声明来访问 ​FormArray ​特有的语法。定义一个方法来把一个绰号控件动态插入到绰号 ​FormArray ​中。用 ​FormArray.push()​ 方法把该控件添加为数组中的新条目。

addAlias() {
  this.aliases.push(this.fb.control(''));
}

在模板中显示表单数组

<div formArrayName="aliases">
  <h2>Aliases</h2>
  <button type="button" (click)="addAlias()">+ Add another alias</button>
  <div *ngFor="let alias of aliases.controls; let i=index">
    <!-- The repeated alias template -->
    <label for="alias-{{ i }}">Alias:</label>
    <input id="alias-{{ i }}" type="text" [formControlName]="i">
  </div>
</div>

添加一个别名

最初，表单只包含一个绰号字段，点击 ​Add Alias​ 按钮，就出现了另一个字段。你还可以验证由模板底部的“Form Value”显示出来的表单模型所报告的这个绰号数组。

AbstractControl

所有三种表单控件类（FormControl、FormGroup和 FormArray）的抽象基类。它提供了一些公共的行为和属性。

FormControl

管理单体表单控件的值和有效性状态。它对应于 HTML 的表单控件，比如 <input>或 <select>。

FormGroup

管理一组 AbstractControl实例的值和有效性状态。该组的属性中包括了它的子控件。组件中的顶层表单就是 FormGroup。

FormArray

管理一些 AbstractControl实例数组的值和有效性状态。

FormBuilder

一个可注入的服务，提供一些用于提供创建控件实例的工厂方法。

把一个独立的 FormControl实例绑定到表单控件元素。

把一个现有 FormGroup中的 FormControl实例根据名字绑定到表单控件元素。

把一个现有的 FormGroup实例绑定到 DOM 元素。

把一个内嵌的 FormGroup实例绑定到一个 DOM 元素。

把一个内嵌的 FormArray实例绑定到一个 DOM 元素。