Angular 7 表单

2025年3月17日 | 阅读 3 分钟

Angular 表单用于处理用户的输入。我们可以在应用程序中使用 Angular 表单，使用户能够登录、更新个人资料、输入信息以及执行许多其他数据输入任务。

在 Angular 7 中，有两种方法可以通过表单处理用户的输入

响应式表单
模板驱动表单

这两种方法都用于从视图中收集用户输入事件，验证用户输入，创建表单模型和数据模型以进行更新，并提供一种跟踪更改的方法。

响应式表单 vs 模板驱动表单

响应式表单和模板驱动表单管理和处理数据的方式不同。每种方法都提供不同的优势。

响应式表单

响应式表单更强大。
响应式表单更具可扩展性、可重用性和可测试性。
如果表单是应用程序的关键部分，或者您的应用程序已经使用响应式模式构建，则最好使用它们。在这两种情况下，响应式表单都是最佳选择。

模板驱动表单

如果要向应用程序添加一个简单的表单，则模板驱动表单是最佳选择。例如：电子邮件列表注册表单。
模板驱动表单在应用程序中使用起来很容易，但它们不如响应式表单那样可扩展。
如果您的应用程序只需要一个非常基本的表单和逻辑，则主要使用模板驱动表单。它可以在模板中轻松管理。

响应式表单和模板驱动表单之间的区别

比较索引	响应式表单	模板驱动表单
设置（表单模型）	响应式表单更明确。它们在组件类中创建。	模板驱动表单不那么明确。它们由指令创建。
数据模型	结构化	非结构化
可预测性	同步	异步
表单验证	函数	指令
可变性	不可变	可变
可扩展性	低级 API 访问	API 之上的抽象

响应式表单和模板驱动表单之间的相似之处

响应式表单和模板驱动表单共享一些构建块

FormControl： 用于跟踪单个表单控件的值和验证状态。
FormGroup： 用于跟踪一组表单控件的相同值和状态。
FormArray： 用于跟踪一组表单控件的相同值和状态。
ControlValueAccessor： 用于在 Angular FormControl 实例和原生 DOM 元素之间创建桥梁。

表单模型设置

表单模型设置用于跟踪 Angular 表单和表单输入元素之间的值更改。让我们举一个例子来了解如何定义和创建表单模型。

响应式表单中的表单模型设置

请参阅以下组件，该组件使用响应式表单实现单个控件的输入字段。

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
@Component({
  selector: 'app-reactive-favorite-color',
  template: `
    Favorite Color: <input type="text" [formControl]="favoriteColorControl"> `
})
export class FavoriteColorComponent {
  favoriteColorControl = new FormControl('');
}

在响应式表单中，表单模型是事实的来源。事实的来源提供给定时间点表单元素的值和状态。

这里，在上面的例子中，表单模型是 FormControl 实例。

在响应式表单中，表单模型在组件类中显式定义。之后，响应式表单指令（这里是：FormControlDirective）使用值访问器（ControlValueAccessor 实例）将现有的 FormControl 实例链接到视图中的特定表单元素。

模板驱动表单中的表单模型设置

请参阅上述相同组件，该组件使用模板驱动表单实现单个控件的输入字段。

import { Component } from '@angular/core';
@Component({
  selector: 'app-template-favorite-color',
  template: `
    Favorite Color: <input type="text" [(ngModel)]="favoriteColor"> `
})
export class FavoriteColorComponent {
  favoriteColor = '';
}

在模板驱动表单中，事实的来源是模板本身。