介绍
表单是任何应用程序的重要组成部分。应用程序使用表单来让用户登录、更新个人资料、输入敏感信息以及执行许多其他数据输入任务。
Angular 帮助我们使用两种不同类型的表单来管理这些不同的数据处理任务：响应式表单和模板驱动表单。两者都从视图捕获用户输入事件、验证用户输入、创建表单模型和要更新的数据模型，并提供跟踪更改的方法。但是，它们也有区别。响应式表单更强大：它们更具可扩展性、可重用性和可测试性。模板驱动表单适用于向应用添加简单表单，例如用户列表注册表单。
使用 FormBuilder 生成控件
在本指南中，我们将学习如何使用FormBuilder在 Angular 中构建表单。处理多个表单时，手动创建多个表单控件实例可能会变得重复。 FormBuilder 服务提供了生成控件的便捷方法。
要使用 FormBuilder 服务，请按照以下步骤操作：
- 导入 FormBuilder 类。
- 注入 FormBuilder 服务。
- 生成表单内容。
让我们看下面的例子，了解如何重构一个名为EmployeeDetailsEditor的组件，以使用 FormBuilder 服务来创建表单控件和表单组实例。
导入 FormBuilder 类
从 @angular/forms 包导入 FormBuilder 类。
文件名：employeeDetails-editor.component.ts
import { FormBuilder } from '@angular/forms';
注入 FormBuilder 服务
FormBuilder 服务是可注入的提供程序，由响应式表单模块提供。我们将通过将其添加到组件构造函数来注入此依赖项。
文件名：employeeDetails-editor.component.ts
constructor(private fb: FormBuilder) { }
生成表单控件
FormBuilder 服务有三种方法：control()、group()和array()。这些是用于在组件类中生成实例的工厂方法，包括表单控件、表单组和表单数组。
使用group()方法创建employeeDetailsForm控件。
文件名：employeeDetails-editor.component.ts
import { Component } from '@angular/core';
import { FormBuilder } from '@angular/forms';
@Component({
selector: 'app-employeeDetails-editor',
templateUrl: './employeeDetails-editor.component.html',
styleUrls: ['./employeeDetails-editor.component.css']
})
export class EmployeeDetailsEditorComponent {
employeeDetailsForm = this.fb.group({
firstName: [''],
lastName: [''],
address: this.fb.group({
street: [''],
city: [''],
state: [''],
zip: ['']
}),
});
constructor(private fb: FormBuilder) { }
}
在上面的例子中，您使用同一个对象的group()方法来定义模型中的属性。每个控件名称的值都是一个数组，其中包含初始值作为数组中的第一项。
您可以仅使用初始值来定义控件，但如果您的控件需要同步或异步验证，请将同步和异步验证器添加为数组中的第二项和第三项。
验证表单输入
表单验证可确保用户输入完整且正确。在本节中，我们将介绍如何向表单控件添加单个验证器并显示整体表单状态。
要使用表单验证，请按照下列步骤操作：
- 在表单组件中导入验证器函数。
- 将验证器添加到表单中的字段。
- 添加逻辑来处理验证状态。
最常用的验证之一是将字段设为必填项。以下示例显示如何向firstName控件添加必填验证并显示验证结果。
导入验证器函数
响应式表单包含一组用于常见用例的验证器函数。这些函数接收要验证的控件，并根据验证检查返回错误对象或空值。
我们从 @angular/forms 包中导入Validators类，如下所示。
文件名：employeeDetails-editor.component.ts
import { Validators } from '@angular/forms';
将字段设为必填项
在EmployeeDetailsEditor组件静态方法中添加Validators.required作为firstName控件数组中的第二项。
文件名：employeeDetails-editor.component.ts
emplyeeDetailsForm = this.fb.group({
firstName: ['', Validators.required],
lastName: [''],
address: this.fb.group({
street: [''],
city: [''],
state: [''],
zip: ['']
}),
});
HTML5 有一组内置属性可用于本机验证，包括 required、minlength 和 maxlength。您可以在表单输入元素上利用这些可选属性。将 required 属性添加到 firstName输入元素。
<input type="text" formControlName="firstName" required>
您必须将这些 HTML5 验证属性与 Angular 的反应式表单提供的内置验证器结合使用。结合使用这些验证器可防止在检查模板后更改表达式时出现错误。
显示表单状态
现在，您可以向表单控件添加必填字段。其初始状态为无效。此无效状态会传播到父表单组元素，使其状态无效。通过其 status 属性访问表单组实例的当前状态。
使用插值显示employeeDetailsForm的当前状态。
文件名：employeeDetails-editor.component.html
<p>
Form Status: {{ employeeDetailsForm.status }}
</p>
由于employeeDetailsForm因firstName表单控件而无效，因此“提交”按钮将被禁用。填写firstName输入后，表单将变为有效，并且“提交”按钮将启用。
结论
在本指南中，我们探索了如何使用 Angular 中的 FormBuilder 构建响应式表单。我们还学习了如何使用Validators函数验证表单输入。
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
