1. 模板驱动表单（Template-Driven Forms）
模板驱动表单是通过在 HTML 模板中使用指令来构建表单的一种方式。该表单形式更适合简单的场景，例如少量的用户输入或简单的数据绑定。
示例：
<!-- 在组件的模板中 -->
<form #myForm="ngForm" (ngSubmit)="onSubmit(myForm.value)">
<label for="name">Name:</label>
<input type="text" id="name" name="name" ngModel required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" ngModel required email>
<button type="submit">Submit</button>
</form>
关键概念：
- ngForm: 表单的 Angular 指令，用于跟踪表单的状态和值。
- ngModel: 双向绑定指令，用于在模板和组件类之间建立数据绑定。
- (ngSubmit): 表单提交时触发的事件，通过它可以调用组件中的方法。
2. 响应式表单（Reactive Forms）
响应式表单是使用 TypeScript 代码来构建表单的一种方式。这种表单形式适用于更复杂的场景，例如动态表单、大量的用户输入以及需要在组件类中进行更多控制的情况。
示例：
// 在组件的类中
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-my-form',
templateUrl: './my-form.component.html',
})
export class MyFormComponent {
myForm: FormGroup;
constructor(private fb: FormBuilder) {
this.myForm = this.fb.group({
name: ['', Validators.required],
email: ['', [Validators.required, Validators.email]],
});
}
onSubmit() {
console.log(this.myForm.value);
}
}
<!-- 在组件的模板中 -->
<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
<label for="name">Name:</label>
<input type="text" id="name" formControlName="name">
<label for="email">Email:</label>
<input type="email" id="email" formControlName="email">
<button type="submit">Submit</button>
</form>
关键概念：
- FormGroup：用于表示整个表单的组。
- FormControl：用于表示单个表单控件的类。
- FormBuilder：辅助类，用于简化创建 FormGroup 和 FormControl。
3. 表单验证（Form Validation）
无论是模板驱动表单还是响应式表单，Angular 都提供了丰富的表单验证功能。你可以使用内置的验证器，也可以创建自定义验证器来满足特定的需求。
示例：
// 在组件的类中（响应式表单）
this.myForm = this.fb.group({
name: ['', [Validators.required, Validators.minLength(3)]],
email: ['', [Validators.required, Validators.email]],
});
// 在模板中显示错误消息
<div *ngIf="myForm.get('name').hasError('required')">
Name is required
</div>
<div *ngIf="myForm.get('name').hasError('minlength')">
Name must be at least 3 characters long
</div>
4. 动态表单（Dynamic Forms）
响应式表单支持动态添加和删除表单控件，以适应不同的用户输入场景。
示例：
// 在组件的类中
addFormControl() {
this.myForm.addControl('newControl', this.fb.control(''));
}
removeFormControl() {
this.myForm.removeControl('newControl');
}
<!-- 在模板中 -->
<button (click)="addFormControl()">Add Control</button>
<button (click)="removeFormControl()">Remove Control</button>
以上只是 Angular 表单的基本介绍，Angular 表单系统还有许多高级功能，如表单数组、异步验证等。如果你想深入学习，建议查阅[Angular 官方文档中的表单部分](https://angular.io/guide/forms)。
转载请注明出处：http://www.pingtaimeng.com/article/detail/4948/Angular