Angular 表单教程

Angular 是一个流行的前端框架，用于构建动态的单页应用程序。表单是应用程序中常见的交互元素，Angular 提供了强大的表单处理功能。

基本概念

在 Angular 中，表单通常分为两种类型：模板驱动表单和模型驱动表单。

模板驱动表单：直接在 HTML 模板中编写表单逻辑。
模型驱动表单：使用 TypeScript 类来定义表单模型，并通过代码来处理表单逻辑。

创建表单

模板驱动表单

在 HTML 模板中添加 <form> 标签，并设置 [(ngModel)] 指令来绑定表单控件到模型。
使用 ngSubmit 指令来处理表单提交事件。

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

模型驱动表单

在 TypeScript 类中定义表单模型。
使用 ReactiveFormsModule 模块来导入表单控件和表单状态。
在组件类中创建表单对象，并使用表单控件来绑定表单数据。

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

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

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

  onSubmit() {
    if (this.form.valid) {
      console.log(this.form.value);
    }
  }
}

表单验证

Angular 提供了多种内置的表单验证规则，例如：

required：必填验证
minlength：最小长度验证
maxlength：最大长度验证
pattern：正则表达式验证

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

表单状态

Angular 提供了 formState 属性来获取表单的状态信息，例如：

valid：表单是否有效
invalid：表单是否无效
pristine：表单是否未被修改
dirty：表单是否被修改

if (this.form.valid) {
  console.log('表单有效');
} else {
  console.log('表单无效');
}

扩展阅读

更多关于 Angular 表单的信息，请访问 Angular 官方文档。