Angular 技术教程：表单验证详解

引言

在Angular应用中，表单验证是一个常见的需求。Angular提供了两种表单处理方式：模板驱动表单和反应式表单。本文将详细讲解这两种表单的验证方法，并通过一个案例来演示如何在实际项目中应用这些技术。

模板驱动表单验证

模板驱动表单使用Angular的指令来简化表单处理。在模板驱动表单中，验证主要通过内置的验证器来实现。

示例代码

首先，我们需要在组件模板中定义一个表单，并添加验证规则：


<form #userForm="ngForm" (ngSubmit)="onSubmit(userForm.value)">
    <div>
        <label for="username">用户名：*</label>
        <input id="username" name="username" ngModel required minlength="3" maxlength="15">
        <div *ngIf="userForm.submitted && userForm.form.get('username').errors?.required">
            用户名是必填项。
        </div>
        <div *ngIf="userForm.submitted && userForm.form.get('username').errors?.minlength">
            用户名长度至少为3个字符。
        </div>
        <div *ngIf="userForm.submitted && userForm.form.get('username').errors?.maxlength">
            用户名长度不能超过15个字符。
        </div>
    </div>
    <div>
        <label for="email">邮箱：*</label>
        <input id="email" name="email" ngModel required email>
        <div *ngIf="userForm.submitted && userForm.form.get('email').errors?.required">
            邮箱是必填项。
        </div>
        <div *ngIf="userForm.submitted && userForm.form.get('email').errors?.email">
            请输入有效的邮箱地址。
        </div>
    </div>
    <button type="submit">提交</button>
</form>

反应式表单验证

反应式表单提供了更多的灵活性和控制力，适合复杂的表单处理场景。在反应式表单中，验证主要通过FormBuilder和验证器来实现。

示例代码

首先，我们需要在组件类中定义一个表单，并添加验证规则：


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

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

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

    onSubmit() {
        if (this.userForm.valid) {
            console.log('表单数据：', this.userForm.value);
        }
    }
}

然后，在模板中绑定表单控件，并显示验证消息：


<form [formGroup]="userForm" (ngSubmit)="onSubmit()">
    <div>
        <label for="username">用户名：*</label>
        <input id="username" formControlName="username">
        <div *ngIf="userForm.get('username').invalid && (userForm.get('username').touched || userForm.submitted)">
            <div *ngIf="userForm.get('username').errors?.required">
                用户名是必填项。
            </div>
            <div *ngIf="userForm.get('username').errors?.minlength">
                用户名长度至少为3个字符。
            </div>
            <div *ngIf="userForm.get('username').errors?.maxlength">
                用户名长度不能超过15个字符。
            </div>
        </div>
    </div>
    <div>
        <label for="email">邮箱：*</label>
        <input id="email" formControlName="email">
        <div *ngIf="userForm.get('email').invalid && (userForm.get('email').touched || userForm.submitted)">
            <div *ngIf="userForm.get('email').errors?.required">
                邮箱是必填项。
            </div>
            <div *ngIf="userForm.get('email').errors?.email">
                请输入有效的邮箱地址。
            </div>
        </div>
    </div>
    <button type="submit">提交</button>
</form>