Angular 表单处理教程

在这个教程中，我们将学习如何使用 Angular 来处理表单。Angular 提供了强大的表单处理功能，可以帮助我们轻松地创建和验证用户输入。

基本概念

• 模板驱动表单：使用 HTML 和 Angular 模板语法来创建表单。
• ** reactive 表单**：使用 TypeScript 和 RxJS 来创建和管理表单状态。

模板驱动表单

模板驱动表单是最简单的表单处理方式。以下是一个简单的模板驱动表单示例：

<form>
  <input type="text" [(ngModel)]="name" name="name" required>
  <button type="submit">提交</button>
</form>

在上面的例子中，我们使用 ngModel 指令来绑定输入框的值到组件的 name 属性。

Reactive 表单

Reactive 表单提供了更灵活和强大的表单处理方式。以下是一个使用 Reactive 表单的示例：

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

export class MyFormComponent {
  myForm: FormGroup;

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

在上面的例子中，我们使用 FormBuilder 创建了一个 FormGroup，并在其中定义了 name 字段的验证规则。

表单验证

Angular 提供了多种表单验证方式，包括：

• 最小长度：确保输入的值至少有指定长度。
• 最大长度：确保输入的值不超过指定长度。
• 必填：确保输入框不为空。

以下是一个包含验证的表单示例：

<form [formGroup]="myForm">
  <input type="text" formControlName="name">
  <div *ngIf="myForm.get('name').hasError('required')">
    必须填写
  </div>
  <div *ngIf="myForm.get('name').hasError('minlength')">
    名称长度至少为 2
  </div>
  <button type="submit" [disabled]="!myForm.valid">提交</button>
</form>

在上面的例子中，我们使用了 formControlName 来绑定输入框到 myForm 的 name 字段，并使用了 required 和 minlength 验证器。

扩展阅读

想要了解更多关于 Angular 表单处理的信息，请阅读以下教程：

• Angular 官方文档 - 表单

希望这个教程能帮助你更好地理解 Angular 表单处理。如果你有任何问题，欢迎在 Angular 社区 中提问。

<center><img src="https://cloud-image.ullrai.com/q/Angular_form_handling/" alt="Angular_form_handling"/></center>