Angular 为表单提供了两种方法。Template-driven 表单很简单，在 HTML 中定义；reactive 表单在 TypeScript 中定义，提供更多控制——更适合复杂的、动态的或需要大量验证的表单。
Template-driven — 逻辑在模板中
ts
// just import FormsModule; minimal TS
html
Submit
表单结构和验证通过 ngModel 指令在模板中。设置简单，但表单模型是隐式的，难以通过编程方式进行测试/操纵。
import { FormBuilder, Validators } from "@angular/forms";
export class SignupComponent {
constructor(private fb: FormBuilder) {}
form = this.fb.group({
email: ["", [Validators.required, Validators.email]],
password: ["", [Validators.required, Validators.minLength(8)]],
});
onSubmit() {
if (this.form.valid) console.log(this.form.value);
}
}
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<input formControlName="email" />
<input formControlName="password" type="password" />
<button [disabled]="form.invalid">Submit</button>
</form>
表单是一个显式对象（FormGroup/FormControl），你在 TS 中构建它。这使得它是可观察的、可测试的，并且易于操纵（添加/删除字段、通过 valueChanges 响应变化）。
Template-driven Reactive
Where defined HTML (ngModel) TypeScript (FormBuilder)
Form model implicit/async explicit, synchronous object
Validation directives in template validators in code
Dynamic forms hard easy (add/remove controls in code)
Testability harder straightforward (it's just an object)
Best for simple forms complex/dynamic/validated forms
this.form.get("email")!.valueChanges.subscribe(v => ...); // react to changes
this.form.valid; // synchronous validity check
选择正确的表单方法对可维护性很重要：template-driven 用于快速、简单的表单；reactive 用于任何复杂的情况——多步骤向导、动态字段集、跨字段验证，或需要单元测试的表单。
Reactive forms 的显式、可观察的模型在严肃应用中通常更受欢迎，因为它更强大、可测试且可扩展，尽管它在前期需要更多代码。