在 Angular 中使用 FormBuilder

2020-06-03 08:00:00 · 飞浪

介绍表单是任何应用程序的重要组成部分。应用程序使用表单来让用户登录、更新个人资料、输入敏感信息以及执行许多其他数据输入任务。 Angular帮助我们使用两种不同类型的表单来管理这些不同

介绍

表单是任何应用程序的重要组成部分。应用程序使用表单来让用户登录、更新个人资料、输入敏感信息以及执行许多其他数据输入任务。

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函数验证表单输入。

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

阅读全文

在 Angular 中使用 FormBuilder

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

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) { } }

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