深入了解angular中的表单「响应式和模板驱动」

1. 前言

在Web开发中，表单是必不可少的一部分，其作用是收集用户的输入数据并发送到服务器进行处理。Angular提供了两种不同的表单方式：响应式表单和模板驱动表单。本文将深入介绍这两种表单的特点以及它们在实际开发中的应用。

2. 响应式表单

响应式表单是Angular中新引入的一种表单方式，其原理是使用可观察对象（Observables）来追踪表单的状态变化。响应式表单相比于模板驱动表单更加灵活，尤其是在处理动态表单时可以发挥其优势。

2.1 响应式表单的基本使用

使用Angular创建响应式表单需要导入ReactiveFormsModule模块，并在组件类中引入FormGroup、FormControl等相关类。例如：

import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
@Component({
  selector: 'app-reactive-form',
  template: `
    <form [formGroup]="profileForm">
      <label>
        Name:
        <input type="text" formControlName="name">
      </label>
      <label>
        Email:
        <input type="email" formControlName="email">
      </label>
    </form>
  `
})
export class ReactiveFormComponent {
  profileForm = new FormGroup({
    name: new FormControl(''),
    email: new FormControl('')
  });
}

上面的代码中，我们定义了一个名为profileForm的FormGroup，并包含了两个FormControl：name和email。FormGroup用来组织表单中的控件，并提供一些共同的状态和方法；FormControl则用来追踪表单控件的值和状态。在HTML模板中，我们使用formGroup指令将我们定义的FormGroup和表单元素绑定起来，更改表单元素的值后，FormGroup对象的valueChanges属性会发出一个Observable，我们可以通过subscribe方法订阅这个Observable，从而得到表单的值和状态。

2.2 动态表单

除了基本的表单绑定之外，响应式表单还可以很方便地创建动态表单。例如，我们可以在用户点击"Add field"按钮时动态添加一个表单控件，代码如下：

import { Component } from '@angular/core';
import { FormGroup, FormControl, FormArray } from '@angular/forms';
@Component({
  selector: 'app-dynamic-form',
  template: `
    <form [formGroup]="profileForm">
      <div formArrayName="aliases">
        <div *ngFor="let alias of aliases.controls; let i=index">
          <input type="text" [formControlName]="i">
          <button (click)="removeAlias(i)" type="button">Remove</button>
        </div>
        <button (click)="addAlias()" type="button">Add field</button>
      </div>
    </form>
  `
})
export class DynamicFormComponent {
  profileForm = new FormGroup({
    aliases: new FormArray([])
  });
  addAlias() {
    this.aliases.push(new FormControl(''));
  }
  removeAlias(index: number) {
    this.aliases.removeAt(index);
  }
  get aliases() {
    return this.profileForm.get('aliases') as FormArray;
  }
}

上述代码使用了FormArray来定义一个动态表单控件数组，我们可以通过addAlias方法向里面添加一个新的FormControl，通过removeAlias方法从中移除一个控件。同时，FormGroup和FormArray都提供了valueChanges属性，方便我们订阅这些控件的变化。

3. 模板驱动表单

模板驱动表单是Angular中传统的表单方式，它的原理是通过模板和指令来构建表单模型。相较于响应式表单，模板驱动表单的代码更少，更适合快速构建简单的表单。

3.1 模板驱动表单的基本使用

使用Angular创建模板驱动表单需要导入FormsModule模块，并在组件类中引入NgForm指令等相关指令。例如：

import { Component } from '@angular/core';
@Component({
  selector: 'app-template-form',
  template: `
    <form #profileForm="ngForm">
      <label>
        Name:
        <input type="text" name="name" [(ngModel)]="name">
      </label>
      <label>
        Email:
        <input type="email" name="email" [(ngModel)]="email">
      </label>
      <button type="submit">Submit</button>
    </form>
  `
})
export class TemplateFormComponent {
  name: string;
  email: string;
}

上面的代码中，我们定义了一个名为profileForm的NgForm指令，并在表单元素中使用[(ngModel)]指令进行双向数据绑定，将表单元素的值与组件类中对应的属性进行绑定。在表单提交时，Angular会自动将表单元素中的值生成一个JSON对象，并提交给服务器进行处理。

3.2 自定义验证器

模板驱动表单还提供了丰富的验证器来保证表单数据的有效性。我们可以使用required、minLength、maxLength等内置验证器，也可以自定义验证器来满足特定的需求。

import { Component } from '@angular/core';
import { NgForm } from '@angular/forms';
function passwordsMatchValidator(form: NgForm) {
  const password = form.value.password;
  const confirmPassword = form.value.confirmPassword;
  if (password !== confirmPassword) {
    return { passwordsMatch: true };
  }
  return null;
}
@Component({
  selector: 'app-password-form',
  template: `
    <form #passwordForm="ngForm" (ngSubmit)="onSubmit(passwordForm)">
      <label>
        Password:
        <input type="password" name="password" ngModel required>
      </label>
      <label>
        Confirm Password:
        <input type="password" name="confirmPassword" ngModel required>
      </label>
      <p *ngIf="passwordForm.hasError('passwordsMatch')">Passwords do not match</p>
      <button type="submit">Submit</button>
    </form>
  `
})
export class PasswordFormComponent {
  onSubmit(form: NgForm) {
    console.log(form.value);
  }
  passwordMatchValidator = passwordsMatchValidator;
}

上述代码定义了一个名为passwordMatchValidator的自定义验证器，当表单中的password和confirmPassword不一致时就会返回一个密码不匹配的错误对象。在HTML模板中，我们可以使用ngModel这个directive调用定义好的验证器，并通过hasError方法检查表单是否包含这个错误。

4. 总结

本文介绍了Angular中的两种表单方式：响应式表单和模板驱动表单。响应式表单通过可观察对象来追踪表单状态的变化，适用于复杂和动态的表单。模板驱动表单则使用模板和指令来构建表单模型，代码更少，更适合快速构建简单的表单。无论是哪种表单方式，Angular的表单模块都提供了丰富的验证器，可以保证表单数据的有效性。