Angular 2 表单学习笔记

在 Angular 2 中，表单是一个非常重要且常用的组件。本文将介绍 Angular 2 表单相关的知识，并通过实例讲解其使用方法。

基础概念

模板驱动表单：通过模板中的指令实现表单处理的方式。
响应式表单：通过 ReactiveForms 模块提供的 API 实现表单处理的方式。

模板驱动表单

基本使用方式

模板驱动表单需要在 HTML 模板中通过指令来完成表单的绑定。以下是一个简单的示例：

htmlCopy Code
<form #loginForm="ngForm" (ngSubmit)="onSubmit(loginForm)">
  <label for="username">用户名</label>
  <input type="text" name="username" ngModel required>

  <label for="password">密码</label>
  <input type="password" name="password" ngModel required>

  <button type="submit">登录</button>
</form>

在这个示例中，我们通过 ngForm 指令将表单元素与表单对象关联，并使用了 ngModel 指令将表单元素与 Angular 的数据模型进行了绑定。

实例演示

以下是一个更为完整的模板驱动表单的示例，包括表单验证、错误提示等功能：

htmlCopy Code
<form #userForm="ngForm" (ngSubmit)="onSubmit(userForm)">
  <div>
    <label for="name">姓名：</label>
    <input type="text" name="name" id="name" [(ngModel)]="user.name" required minlength="2" maxlength="20">
    <div *ngIf="userForm.controls['name'].invalid && (userForm.controls['name'].dirty || userForm.controls['name'].touched)">
      <div *ngIf="userForm.controls['name'].errors.required">姓名是必填项</div>
      <div *ngIf="userForm.controls['name'].errors.minlength">姓名最少 {{ userForm.controls['name'].errors.minlength.requiredLength }} 个字符</div>
      <div *ngIf="userForm.controls['name'].errors.maxlength">姓名最多 {{ userForm.controls['name'].errors.maxlength.requiredLength }} 个字符</div>
    </div>
  </div>

  <div>
    <label for="email">邮箱：</label>
    <input type="email" name="email" id="email" [(ngModel)]="user.email" required email>
    <div *ngIf="userForm.controls['email'].invalid && (userForm.controls['email'].dirty || userForm.controls['email'].touched)">
      <div *ngIf="userForm.controls['email'].errors.required">邮箱是必填项</div>
      <div *ngIf="userForm.controls['email'].errors.email">请填写正确的邮箱格式</div>
    </div>
  </div>

  <button type="submit" [disabled]="!userForm.valid">提交</button>
</form>

在这个示例中，我们使用了 ngForm 指令将表单元素与表单对象关联，并使用了 [(ngModel)] 指令将表单元素与 Angular 的数据模型进行了双向绑定。

同时，我们还使用了 Angular 提供的各种验证指令和属性来完成表单验证，以及错误提示等功能。这些指令和属性包括 required、minlength、maxlength、email、dirty、touched 等。

响应式表单

基本使用方式

响应式表单通过 ReactiveForms 模块提供的 API 来实现表单处理的方式。以下是一个简单的示例：

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

@Component({
  selector: 'app-user-form',
  templateUrl: './user-form.component.html'
})
export class UserFormComponent {
  userForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.userForm = this.fb.group({
      name: ['', [Validators.required, Validators.minLength(2), Validators.maxLength(20)]],
      email: ['', [Validators.required, Validators.email]]
    });
  }

  onSubmit() {
    console.log(this.userForm.value);
  }
}

在这个示例中，我们使用 ReactiveForms 模块提供的 API 来创建了一个表单对象，并在 HTML 模板中绑定了该表单对象。

实例演示

以下是一个更为完整的响应式表单的示例，包括表单验证、错误提示等功能：

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

@Component({
  selector: 'app-user-form',
  templateUrl: './user-form.component.html'
})
export class UserFormComponent {
  userForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.userForm = this.fb.group({
      name: ['', [Validators.required, Validators.minLength(2), Validators.maxLength(20)]],
      email: ['', [Validators.required, Validators.email]]
    });
  }

  onSubmit() {
    console.log(this.userForm.value);
  }
}

htmlCopy Code
<form [formGroup]="userForm" (ngSubmit)="onSubmit()">
  <div>
    <label for="name">姓名：</label>
    <input type="text" name="name" id="name" formControlName="name">
    <div *ngIf="userForm.get('name').invalid && (userForm.get('name').dirty || userForm.get('name').touched)">
      <div *ngIf="userForm.get('name').errors.required">姓名是必填项</div>
      <div *ngIf="userForm.get('name').errors.minlength">姓名最少 {{ userForm.get('name').errors.minlength.requiredLength }} 个字符</div>
      <div *ngIf="userForm.get('name').errors.maxlength">姓名最多 {{ userForm.get('name').errors.maxlength.requiredLength }} 个字符</div>
    </div>
  </div>

  <div>
    <label for="email">邮箱：</label>
    <input type="email" name="email" id="email" formControlName="email">
    <div *ngIf="userForm.get('email').invalid && (userForm.get('email').dirty || userForm.get('email').touched)">
      <div *ngIf="userForm.get('email').errors.required">邮箱是必填项</div>
      <div *ngIf="userForm.get('email').errors.email">请填写正确的邮箱格式</div>
    </div>
  </div>

  <button type="submit" [disabled]="!userForm.valid">提交</button>
</form>

在这个示例中，我们同样使用了 Angular 提供的各种验证指令和属性来完成表单验证，以及错误提示等功能。不同的是，我们使用 ReactiveForms 模块提供的 API 来创建了一个表单对象，并在 HTML 模板中绑定了该表单对象。

总结

Angular 2 中的表单是一个非常重要且常用的组件，有模板驱动表单和响应式表单两种处理方式。无论采用哪种方式，都需要掌握 Angular 提供的各种验证指令和属性，并且需要注意实现的细节。