19 表单处理之响应式和模板驱动表单

在上章中，我们探讨了 Angular 的服务与依赖注入机制，并使用了 HTTP 服务来构建与后端的交互。现在，我们将进入表单处理的部分，学习 Angular 中的两种表单开发方式：响应式表单和模板驱动表单。理解这两种方式对于构建用户交互非常重要，因为表单是单页面应用中的基本构建块。

1. 响应式表单

响应式表单是 Angular 处理表单的一种方式，它通过构建表单模型来实现动态、灵活的表单管理。响应式表单使用 Reactive Forms 模块。

1.1 创建响应式表单

首先，需要在模块中导入 ReactiveFormsModule：

import { ReactiveFormsModule } from '@angular/forms';

然后在你的模块中添加它：

@NgModule({
  imports: [
    ReactiveFormsModule,
    // 其他模块
  ],
  // 其他配置
})
export class AppModule { }

接下来，让我们创建一个简单的响应式表单组件：

例子：基础响应式表单

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

@Component({
  selector: 'app-reactive-form',
  template: `
    <form [formGroup]="myForm" (ngSubmit)="onSubmit()">
      <label for="name">Name:</label>
      <input id="name" formControlName="name">

      <label for="email">Email:</label>
      <input id="email" formControlName="email">

      <button type="submit">Submit</button>
    </form>
  `
})
export class ReactiveFormComponent implements OnInit {
  myForm: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.myForm = this.fb.group({
      name: ['', Validators.required],
      email: ['', [Validators.required, Validators.email]]
    });
  }

  onSubmit() {
    if (this.myForm.valid) {
      console.log(this.myForm.value);
    }
  }
}

在该示例中，我们使用 FormBuilder 创建一个表单组，name 和 email 字段都设置了基本的验证。使用 formControlName 指令来绑定表单控件。

1.2 响应式表单的验证

在响应式表单中，验证是通过 Validators 来实现的，您可以像下面这样添加更多的验证逻辑：

this.myForm = this.fb.group({
  name: ['', [Validators.required, Validators.minLength(3)]],
  email: ['', [Validators.required, Validators.email]]
});

2. 模板驱动表单

模板驱动表单是另一种在 Angular 中处理表单的方式，它主要依赖于模板来建立表单的结构和验证。模板驱动表单使用 FormsModule。

2.1 创建模板驱动表单

首先确保导入 FormsModule：

import { FormsModule } from '@angular/forms';

添加到模块中：

@NgModule({
  imports: [
    FormsModule,
    // 其他模块
  ],
  // 其他配置
})
export class AppModule { }

例子：基础模板驱动表单

import { Component } from '@angular/core';

@Component({
  selector: 'app-template-driven-form',
  template: `
    <form #f="ngForm" (ngSubmit)="onSubmit(f)">
      <label for="name">Name:</label>
      <input id="name" name="name" ngModel required>

      <label for="email">Email:</label>
      <input id="email" name="email" ngModel email required>

      <button type="submit">Submit</button>
    </form>
  `
})
export class TemplateDrivenFormComponent {
  onSubmit(form: any) {
    console.log(form.value);
  }
}

在这个例子中，我们使用 ngModel 指令来双向绑定数据。通过在输入控件中添加 required 和 email 进行验证。

2.2 模板驱动表单的验证

与响应式表单一样，模板驱动表单也支持表单验证。我们可以使用内置的 Angular 验证器或自定义验证器，如下所示：

<input id="name" name="name" ngModel required minlength="3">

3. 区别与选择

3.1 选择哪种方式？

• 响应式表单：适合复杂的表单交互，能够进行更好的动态操作和实时验证。
• 模板驱动表单：语法简单，适合小型表单和简单的需求。

3.2 案例对比

假设我们需要在同一个项目中使用两种表单，我们可以通过以下方式组织：

• 使用响应式表单来处理用户注册。
• 使用模板驱动表单来处理用户反馈。

这样的分离有助于保持代码的清晰性与高内聚性。

总结

在本章中，我们了解了 Angular 中的响应式表单和模板驱动表单的基本用法及其验证机制。无论你选择哪种表单方式，均会助力于提升用户交互的体验。接下来，我们将继续深入探讨表单验证，确保表单数据的有效性和安全性。