Angular Signal Forms：以状态为先，革新表单验证、UI 更新与状态管理
Angular Signal Forms：为表单管理引入以状态为先的模型
表单通常是前端应用中状态最复杂的部分，负责捕获用户输入、运行验证逻辑、跟踪交互状态，并协调更改在 UI 中传播。随着表单规模增大，保持内容同步所需代码量会迅速增加。
Angular 引入多种管理表单的方法，早期依赖模板驱动表单，后来响应式表单提供结构化方式建模验证和控制状态，类型化表单提升开发者体验，而 Signal Forms 代表这一演进的下一步。
Signal Forms 反映向以状态为先的前端架构转变的趋势，开发者只需描述表单数据结构和验证规则，Angular 会自动保持 UI 同步，这体现了现代前端框架的架构趋势。
现代表单的复杂性源于协调对事件的反应，而非直接表示表单状态。Signal Forms 探索当表单状态成为主要抽象时的情况，如在《我们误把事件处理当成了架构》中所探讨的，前端系统围绕事件链构建会变得复杂，表单是明显例子，展示了以状态为先的模型如何改变前端系统构建方式。现代前端的复杂性往往是围绕事件流而非显式状态建模系统的结果。
表单为何变得复杂
表单很少由简单输入组成，即使较小的表单也包含多层行为，如验证规则、错误消息等。在传统架构中，事件流触发这些行为，开发者需协调许多活动部件，随着表单动态性增加，协调逻辑会迅速增长。而 Angular Signal Forms 从状态出发应对挑战。
用信号建模表单数据
Signal Forms 从用信号表示的模型开始，开发者先定义表示表单的数据结构，如：
```typescript
import { signal } from '@angular/core';
interface LoginModel {
email: string;
password: string;
}
loginModel = signal({
email: '',
password: '',
});
```
这个信号是表单数据的唯一真实来源，用户与表单输入交互时，Angular 自动更新模型，由于信号是响应式原语，Angular 可跟踪 UI 对状态的依赖并自动更新界面，表单的数据模型是架构核心。
创建 Signal Form
定义模型后，Angular 的 Signal Forms API 将模型与表单行为连接，如：
```typescript
import { form, required, email } from '@angular/forms/signals';
loginForm = form(this.loginModel, (schema) => {
required(schema.email, { message: 'Email is required' });
email(schema.email, { message: 'Enter a valid email address' });
required(schema.password, { message: 'Password is required' });
});
```
`form()` 函数将信号模型与表单逻辑联系起来，`schema` 回调定义验证规则，验证是对表单状态约束的声明性描述，使验证逻辑与数据结构紧密结合，Angular 自动计算字段有效性。
在模板中绑定字段
使用 `formField` 指令将字段绑定到表单，Angular 自动使表单模型与 UI 同步，模板可直接读取字段当前值，如：
```html
Email value: {{ loginForm.email().value() }}
```
由于值通过信号暴露，Angular 在底层状态更改时自动更新 UI，无需手动订阅或显式变更检测。
作为响应式状态的验证
验证是 Signal Forms 凸显以状态为先模型优势的领域。传统表单架构中，验证以一系列反应形式发生，而 Signal Forms 中，验证规则描述对表单状态的约束，Angular 直接从当前模型派生有效性，当验证成为表单状态的函数，同步问题减少，开发者定义数据与有效性的关系，Angular 自动维护。
响应式 UI 行为
由于字段状态是响应式的，模板可直接对验证结果做出响应，如：
```html
@if (loginForm.email().errors()) {
Please enter a valid email address.
}
```
每当字段值更改或验证规则更新状态时，Angular 自动刷新 UI，开发者无需手动订阅值的更改或通过组件代码传播状态。
以状态为先的思维模型
Signal Forms 最重要的是其所倡导的思维模型。传统表单系统围绕事件流组织，而 Signal Forms 转向显式地建模状态，表单模型描述数据，验证规则描述约束，UI 自动反应，使 Angular 表单架构从事件编排转向显式的状态建模，减少手动同步量，简化大型表单应用程序的推理。
Signal Forms 的现状
Signal Forms 目前是 Angular 中的实验性特性，适用于采用 Signals 作为核心响应式原语的应用程序。基于响应式表单构建的现有应用程序可继续使用响应式表单，其仍是复杂工作流的稳定解决方案。此外，Angular 的 Signal Forms API 提供互操作性工具，允许现有 `FormControl` 或 `FormGroup` 实例参与基于信号的表单，使逐步采用 Signal Forms 成为可能。
Signal Forms 代表新方向，与 Angular 更广泛的基于 Signals 的架构相一致，展示了状态成为核心抽象时 UI 模式的演变。
Signals 与 Angular 表单的未来
Angular 对 Signals 的投入影响了框架多个部分，表单是简化应用程序设计的领域之一。通过将表单数据建模为响应式状态，Angular 可减少开发者编写的协调代码量。随着 Signals 在 Angular 中成熟，表单可能成为框架向状态驱动的前端架构转变的明显例子。
对于许多应用程序，表单是复杂性积累最快的地方，Signal Forms 展示了将状态作为核心抽象使管理复杂性变得更容易。随着这种模型发展，Angular 等框架可能远离将显式事件编排作为主要设计工具，更多围绕状态关系和派生计算构建架构，类似模式在组件输入、路由和数据获取等方面出现，这一方向将塑造未来几年 Angular 应用程序的设计方式。