Angular 8 表单

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

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

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

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

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

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

响应式表单

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

模板驱动表单

• 如果您想向应用程序添加一个简单的表单，则模板驱动表单是最好的选择。例如：电子邮件列表注册表单。
• 模板驱动表单易于在应用程序中使用，但它们的可伸缩性不如响应式表单。
• 模板驱动表单主要用于应用程序需要非常基本的表单和逻辑的情况。它可以在模板中轻松管理。

Angular 8 表单示例

让我们通过创建一个表单示例来了解 Angular 8 表单。在这里，我们使用 Angular 响应式表单。

请按照以下步骤操作

• 创建一个名为 angular8from 的 Angular 表单应用程序，并使用以下命令运行服务器。

• 使用以下命令安装 Bootstrap 4。

现在，将 bootstrap 4 包含在 angular.json 文件中的 styles 数组中。

• 注册响应式表单模块

通过从 @angular/forms 包中导入 ReactiveFormsModule 并将其添加到您的 app.module.ts 文件的 imports 数组中来使用响应式表单。

因此，在 app.module.ts 文件中使用以下代码。

• 添加 FormControl 类以将控件注册到模板中并更新 FormControl 值

在使用响应式表单时，FormControl 类是基本构建块。因此，如果您想注册单个表单控件，您需要将 FormControl 类导入到您的组件中，并创建表单控件的新实例以保存为类属性。

现在，修改 app.component.ts 文件。

此外，更新视图 app.component.html 文件。

现在，保存您的代码并启动服务器。

输出

输入任何电子邮件 ID，您将在值中看到结果。

当您单击“更新电子邮件”按钮时，它将更新我们在模板文件中保存的电子邮件 ID。