Angular 表单示例指南 📝

Angular 提供了两种主流表单处理方式：模板驱动表单（Template-Driven Forms）和 响应式表单（Reactive Forms）。以下是常见用例与实现方式：

1. 模板驱动表单 🧱

• 使用 ngModel 实现双向绑定
• 适合简单表单场景
• 示例代码：

<form #myForm="ngForm" (ngSubmit)="onSubmit(myForm)">
  <input name="username" ngModel required />
  <button type="submit">提交</button>
</form>

2. 响应式表单 🔄

• 基于 FormGroup 和 FormControls
• 支持复杂验证逻辑
• 示例代码：

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

this.form = new FormGroup({
  username: new FormControl('', [Validators.required, Validators.minLength(3)])
});

3. 表单验证 🔍

• 必填项：required
• 最小长度：minlength
• 自定义验证器：通过 ValidatorFn
• 实时反馈：使用 ngModel 的 invalid 状态

4. 表单提交处理 🚀

• 通过 (ngSubmit) 事件绑定提交方法
• 可结合 formGroup 实现数据绑定
• 示例路径：Angular 表单提交详解

需要更多实践案例？可查看 Angular 官方表单文档 获取完整指南。