angular4输入有效性_如何在Angular中创建响应式表单

在这篇文章中，我们了解了如何在Angular应用程序中逐步创建响应式表单！Angular为我们提供了两种类型的表单

Template-Driven Forms - 模板驱动式表单Reactive Forms - 响应式表单

在模板驱动式表单中，您可以在组件模板上创建控件并使用ngModel绑定数据。通过这些，您不需要创建控件，表单对象或编写代码来处理组件类和模板之间的数据推拉操作; Angular为你完成所有这些任务。在模板驱动式表单中，组件类中的验证代码很少，而且是异步的。

在响应式表单中，您创建表单控件作为组件类中对象的树，并将它们绑定到模板中的本机窗体控件。所有验证和表单控件的创建都写在组件类中。在响应式表单中，本地表单的所有验证和更改都是同步的，所以您可以在组件类中编写代码来观察它们。当数据模型不可变且通常映射到数据库时，您应该选择创建响应式表单。

这两种创建表单的主要区别？在反应形式中，您不使用ngModel等指令，必要的等等。您在组件类中创建所有控件及其验证。响应式表单很容易测试和维护，所以在这篇文章中，我们将学习使用FormControl，FormGroup，FormBuilder类和添加验证来创建一个基本的响应式表单。

第1步：添加响应式表单模块

要开始使用响应式表单，首先在App Module中添加ReactiveFormsModule，如下一个代码块所示：

第2步：导入组件中的必需模块

接下来，您需要在组件类中导入所需的Reactive类，例如FormGroup，FormControl和FormArray。我们将使用这些类来构造我们的Reactive。在导入这些类之后，组件类应该看起来像我在下面得到的那样：

您的组件类可以不同于上面创建的AppComponent，具体取决于您的实现;不过，在这里我们已经导入了FormGroup，FormControl和FormArray类。让我们逐一了解这些类。

第3步：使用FormControl类

FormControl类对应于一个单独的表单控件，跟踪它的值和有效性。在创建反应形式时，您将创建FormControlclass的一个对象。 FormControl构造函数有三个参数：

初始数据值,可以为null。同步验证器,这是一个可选参数。异步验证器,这是一个可选参数。

在组件类中，您可以创建一个FormControl，如下面的代码所示：

我们没有传递任何可选参数，如同步验证或异步验证，但是我们将在向FormControl添加验证的同时探索这些参数。

在视图上，您可以使用电子邮件FormControl，如下所示：

如您所见，我们使用属性绑定将formControl电子邮件绑定到视图上的输入元素。

第4步：使用FormGroup类

FormGroup是一组FormControls。您可以封装FormGroup中的各种FormControl，它提供了一个API：

跟踪一组控件或表单的验证。跟踪一组控件或表单的值。

它包含子控件作为它的属性，它对应于视图上的顶部杠杆形式。您可以将FormGroup视为一个单独的对象，该对象聚合了子FormControl的值。每个单独的窗体控件是FormGroup对象的属性。

您可以创建一个FormGroup类，如下面的代码所示：

这里我们创建了一个登录表单，它是一个FormGroup。它由两个电子邮件和密码的表单控件组成。在视图上使用FormGroup非常简单，如下面的代码所示：

这里我们使用属性绑定来绑定FormGroup与窗体和formControlName指令，以将FormControl附加到视图上的特定元素。

如果您使用了模板驱动的表单，您会注意到现在的视图非常精简：没有ngModel或名称附加到元素。您可以通过使用值和状态属性来查找表单的值和状态。现在，您不再需要使用模板引用变量来查找表单的状态和值。

第5步：提交表格

要提交表单，我们在表单上添加一个提交按钮，并调用一个函数。我们将修改如下的表单：

在组件类中，可以添加一个函数来提交表单，如下面的代码所示：

这里我们刚刚添加了一个名为loginUser的函数来处理表单提交事件。在这个函数内部，你可以使用status和value属性来读取FormGroup对象的loginForm的值和状态。正如你所看到的，这给你一个聚合个别表单控件值的对象。

第6步：添加验证

您可能已经注意到我们没有添加任何验证的形式。让我们开始向FormControl添加验证。为此，从@ angular / forms导入Validators：

在模板上，可以使用FormGroup get方法在特定的表单控件中查找错误并使用它。在下面的清单中，我们正在检查电子邮件的验证错误并显示错误div。

您也可以在默认情况下禁用您的提交按钮，并在表单有效以允许提交时启用它。这可以如下所示完成：

将所有内容放在一起，具有反应形式的模板将如下所示：

组件类将如下所示：

第7步：使用FormBuilder

FormBuilder用于简化FormGroup和FormControl的语法。当你的表单变得冗长时，这是非常有用的。让我们重构loginForm以使用FormBuilder。为此，首先从@ angular / forms导入FormBuilder。然后将其注入到组件中，如下所示：

您可以使用FormBuilder创建一个被动表单，如下面的清单所示。如您所见，它简化了语法：

FormBuilder和FormControl类的模板都是一样的。把所有东西放在一起，使用FormBuilder创建一个反应形式的组件将如下所示：

Angular的响应式表单就这样创建完成。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！