Angular 表单与验证：处理用户输入与数据校验

表单是 Web 应用中用户交互的重要部分，Angular 提供了强大的表单模块来简化表单处理、数据校验以及错误处理的过程。本文将介绍如何在 Angular 中使用表单模块来处理用户输入，并实现数据的验证和错误处理。

创建模板驱动表单

Angular 提供了两种表单处理方式：模板驱动表单和响应式表单。首先，我们来学习模板驱动表单的使用。

1. 创建表单元素： 在模板中添加表单元素，使用双向数据绑定来关联表单控件和组件属性。

<form #myForm="ngForm" (ngSubmit)="onSubmit(myForm)">
  <label>Name:</label>
  <input type="text" name="name" ngModel required>

  <button type="submit">Submit</button>
</form>

1. 数据绑定和校验： 使用ngModel 指令进行双向数据绑定，并可以在表单控件上添加属性来定义校验规则。

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

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html'
})
export class FormComponent {
  onSubmit(form: NgForm) {
    if (form.valid) {
      // 处理提交逻辑
    }
  }
}

响应式表单

响应式表单是通过编程方式创建表单控件，并使用FormGroup 和FormControl 来管理表单的状态和值。

1. 创建表单组： 使用FormGroup 创建一个表单组，并在其中添加FormControl。

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

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

  constructor(private fb: FormBuilder) {
    this.myForm = this.fb.group({
      name: ['', Validators.required],
      email: ['', [Validators.required, Validators.email]],
      // 更多表单控件
    });
  }

  onSubmit() {
    if (this.myForm.valid) {
      // 处理提交逻辑
    }
  }
}

1. 在模板中绑定： 在模板中使用[formGroup] 来绑定表单组，使用formControlName 来绑定单个表单控件。

<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
  <label>Name:</label>
  <input type="text" formControlName="name">

  <button type="submit" [disabled]="myForm.invalid">Submit</button>
</form>

表单验证与错误处理

Angular 提供了丰富的验证器来校验表单数据，如Validators.required、Validators.email 等。你也可以自定义验证器函数。

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

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

在模板中，你可以使用ngIf 和ngClass 来展示错误消息和样式。

<input type="text" formControlName="name">
<div *ngIf="myForm.controls.name.invalid && myForm.controls.name.touched"
     class="error-message">Name is required</div>

总结

Angular 表单模块提供了多种方式来处理表单输入、数据验证和错误处理。你可以选择模板驱动表单或响应式表单，根据项目的需求来决定最适合的方式。通过使用内置的验证器和自定义验证逻辑，你可以确保用户输入的数据的正确性，并为用户提供更好的交互体验。