Signal Forms 刚刚新增自动状态类（以及更多）

Source: Dev.to

让我们一起探讨这个 Signal Form 是如何构建的

样式

组件的 SCSS 仍然针对经典的 ng- 类：

input {
  /* touched vs untouched */
  &.ng-untouched {
    background-color: rgba(white, 0.05);
  }

  &.ng-touched {
    background-color: rgba(#007bff, 0.15);
  }

  /* dirty vs pristine */
  &.ng-dirty {
    box-shadow: 0 0 0 2px rgba(#007bff, 0.12);
  }

  /* valid vs invalid */
  &.ng-touched.ng-invalid {
    border-color: #e53935;
  }

  &.ng-touched.ng-valid {
    border-color: #43a047;
  }

  /* pending */
  &.ng-pending {
    border-color: orange;
  }
}

模板解析：全新的 [field] 指令

[field] 指令直接将输入绑定到 Signal Form 中的 Field 对象，并为 value、touched、dirty、valid 与 pending 暴露信号。

调试面板会实时显示状态：

@let username = form.username();

字段状态

touched: {{ username.touched() }}
dirty: {{ username.dirty() }}
valid: {{ username.valid() }}
pending: {{ username.pending() }}

手动添加经典类是可以做到的，但会很繁琐。

TypeScript 深入：模型与 form()

import { signal, form } from '@angular/forms/signals';
import { required, minLength } from '@angular/forms';

interface SignUpForm {
  username: string;
}

// 保存表单数据的可写信号
protected model = signal({
  username: '',
});

// 将模型连接到 Signal Form API
protected form = form(this.model, s => {
  s.username(required(), minLength(3));
});

• model 是一个可写信号，代表表单数据的真实来源。
• form(this.model, …) 创建一个 Signal Form 实例，将模型与验证逻辑关联。s.username 构造器让我们可以附加 required()、minLength() 等验证器。

恢复自动 ng-* 类（并自定义它们）

Angular 21 引入了 provideStateClasses 配置，用于 Signal Forms。只需将其加入组件（或全局）的 providers 数组，框架就会基于每个字段的信号自动添加经典的 ng- 类。

import { Component } from '@angular/core';
import { provideStateClasses } from '@angular/forms';

@Component({
  selector: 'app-signup',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.scss'],
  providers: [provideStateClasses()] // <-- 启用自动 ng-* 类
})
export class FormComponent {
  // 如上所示的模型和表单定义
}

自定义类前缀

如果你想使用不同的命名方案，provideStateClasses 接受一个选项对象：

providers: [
  provideStateClasses({
    prefix: 'sf-', // 例如 sf-touched、sf-dirty、…
    map: {
      touched: 'my-touched',
      dirty: 'my-dirty',
      valid: 'my-valid',
      invalid: 'my-invalid',
      pending: 'my-pending'
    }
  })
]

• prefix 为所有生成的类添加自定义前缀。
• map 允许你为单个状态类重新命名。

使用此配置后，原来的 SCSS 可以改为针对新的类名，或者如果保持默认的 ng- 前缀，也可以继续使用原来的选择器。

小结

• 响应式表单会自动应用 ng-* 状态类；Signal Forms 最初没有这些类。
• Angular 21.0.1 通过 provideStateClasses 重新引入了自动类生成。
• 该提供者开箱即用，支持默认的 ng- 前缀，也可以通过前缀和显式映射进行自定义。
• 不再需要在每个控件上手动绑定类——Angular 会为你处理，让现有样式在迁移到 Signal Forms 后依然可用。