如何在Angular中处理表单？(附代码）

方石剑
118 阅读4分钟

在Angular中处理表单

了解Angular中的模板驱动型和反应型表单

在Angular中处理表单

用表单处理用户输入总是应用程序的一个重要部分。应用程序使用表单使用户能够登录，更新个人资料，并执行许多其他数据输入任务。

Angular为我们提供了两种处理表单的方法。模板驱动和反应式方法。

模板驱动是指我们在HTML模板中处理大部分与表单相关的东西，让Angular通过放置一些指令来处理用户的输入，如NgForm、NgModel、NgModelGroup等。另一方面，在反应式表单中，所有与表单相关的逻辑都写在组件类本身，我们在HTML模板中写的逻辑非常少，只是为了绑定formGroup、（ngSubmit）、formControlName等东西。

让我们试着建立基本的表单，了解这两种方法。

模板驱动的表单

在模板驱动的表单中。

  1. 表单是使用ngForm 指令设置的
  2. 控件是使用ngModel 指令设置的
  3. ngModel 也提供了双向的数据绑定

为了使用模板驱动的表单，我们必须导入FormsModule

我们在app.module.ts中这样做。

import { BrowserModule } from '@angular/platform-browser';import { NgModule } from '@angular/core';import { AppComponent } from './app.component';import { FormsModule } from '@angular/forms';

之后，我们的任务是创建一个普通的HTML表单，然后将其转换为模板驱动的表单，angular为我们做到了这一点。在这里，我将创建一个基本的表单，它需要输入用户名和电子邮件。

我们所要做的就是为我们的表单添加ngForm指令，并将其设置为一个本地变量。这里我把它设置为#f。可以像下面这样做。

<form (ngSubmit)="onFormSubmit()" #f="ngForm">

ngForm 会自动为我们做以下工作。

  1. 将自己绑定到<Form> 指令上
  2. 创建一个顶级的FormGroup 实例
  3. 为每个子控件创建FormControl 实例，这些子控件有ngModel 指令。
  4. 为每个NgModelGroup 指令创建FormGroup 实例。

因此，我们的下一个任务是将ngModel指令添加到所有的表单控件中，我们希望angular能够接收。ngModel 将使用name 属性来为它所连接的每个Form 字段创建FormControl 实例。

现在，一旦模板准备好了，我们就可以把最后一块提交给组件的数据。

我们使用ngSubmit 事件，来提交表单数据给组件类。我们使用事件绑定（括号），将ngSubmit 绑定到组件类的onFormSubmit 方法。当用户点击提交按钮时，ngSubmit 事件将被触发。

一个添加了Angular Forms控件的简单HTML表单

在我们的组件中，我们只是记录NgForm的数据，在onFormSubmit方法中没有其他内容。

一个将记录我们的NgForm数据的组件

现在使用ng serve运行应用程序，并进入Chrome开发工具的控制台。 现在尝试添加一些数据，当点击提交时，你会看到NgForm数据被记录在控制台中（如下截图所示）。

显示记录的NgForm数据的应用程序

NgForm为我们提供了很多数据来控制我们的表单，设置验证和获取值，我们将在另一篇文章中介绍。现在，为了获取数值，我们可以做 console.log(this.myForm.values)。

Values将是一个保存数据的对象。

values: Object {

反应式表单

为了使用反应式表单，你将使用ReactiveFormsModule ，而不是FormsModule 。在你的代码编辑器中打开app.module.ts ，添加ReactiveFormsModule 。

import { BrowserModule } from '@angular/platform-browser';import { NgModule } from '@angular/core';import { ReactiveFormsModule } from '@angular/forms';import { AppComponent } from './app.component';@NgModule({  declarations: [    AppComponent  ],  imports: [    BrowserModule,    ReactiveFormsModule,  ],  providers: [],  bootstrap: [AppComponent]})export class AppModule { }

使用反应式表单的方法，我们的整个逻辑是在组件类本身中编写和处理的。让我们创建一个基本的HTML模板，然后转到组件类逻辑。

<form [formGroup]="myForm" (ngSubmit)="onSubmit(myForm)">  <div>    <label>      Name:      <input formControlName="name" placeholder="Your name">    </label>  </div>  <div>    <label>      Email:      <input formControlName="email" placeholder="Your email">    </label>  </div>  <div>    <label>      Message:      <input formControlName="message" placeholder="Your message">    </label>  </div>  <button type="submit">Send</button></form>

在这里，我们使用formGroup，因为这个指令将告诉Angular把它当作一个FormGroup，并给它起了一个名字叫myForm。然后我们开发了一个基本的表单模板，允许用户输入他们的名字、电子邮件和一些信息，并通过发送按钮提交。提交与**(ngSubmit)事件绑定，在表单提交时被触发。然后，我们在每个表单字段上有一个formControlName**，这是一个指令，其值将是组件类中使用的名称。

在组件类中，我们定义了一个FormGroup，在FormGroup内有单独的FormControls。如果在新建一个FormControl ，提供了一个值，它将被用作该字段的初始值。我们还可以提供更多的参数，如内置和自定义验证数组，以及类似的异步验证，我们将在另一篇文章中介绍。

import { Component, OnInit } from '@angular/core';import { FormControl, FormGroup } from '@angular/forms';

在这里，我们不会将表单数据提交给一些外部服务器，我们只是记录所有的表单值。

avatar
文章
阅读
粉丝