angular · SkyZeroZx · May 20, 2026 · JeanMeche · May 20, 2026
diff --git a/adev/src/assets/BUILD.bazel b/adev/src/assets/BUILD.bazel
@@ -72,6 +72,7 @@ copy_to_directory(
         "//packages/forms:forms_docs",
         "//packages/forms/signals:forms_signals_docs",
         "//packages/forms/signals/compat:forms_signals_compat_docs",
+        "//packages/forms/signals/config:forms_signals_config_docs",
         "//packages/localize:localize_docs",
         "//packages/localize/src/localize:localize_init_docs",
         "//packages/platform-browser:platform-browser_docs",

diff --git a/adev/src/content/guide/forms/signals/migration.md b/adev/src/content/guide/forms/signals/migration.md
@@ -419,7 +419,7 @@ such as `.ng-valid` or `.ng-dirty`) to facilitate styling control states. Signal
 If you want to preserve this behavior, you can provide the `NG_STATUS_CLASSES` preset:
 
 ```typescript
-import {provideSignalFormsConfig} from '@angular/forms/signals';
+import {provideSignalFormsConfig} from '@angular/forms/signals/config';
 import {NG_STATUS_CLASSES} from '@angular/forms/signals/compat';
 
 bootstrapApplication(App, {
@@ -434,7 +434,7 @@ bootstrapApplication(App, {
 You can also provide your own custom configuration to apply whatever classes you wish based on you custom logic:
 
 ```typescript
-import {provideSignalFormsConfig} from '@angular/forms/signals';
+import {provideSignalFormsConfig} from '@angular/forms/signals/config';
 
 bootstrapApplication(App, {
   providers: [

diff --git a/goldens/public-api/forms/signals/config/index.api.md b/goldens/public-api/forms/signals/config/index.api.md
@@ -0,0 +1,40 @@
+## API Report File for "@angular/forms_signals_config"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+
+import { Injector } from '@angular/core';
+import { Provider } from '@angular/core';
+import { Signal } from '@angular/core';
+
+// @public
+export function provideSignalFormsConfig(config: SignalFormsConfig): Provider[];
+
+// @public
+export interface SignalFormsClassBinding {
+    readonly element: HTMLElement;
+    focus(options?: FocusOptions): void;
+    readonly injector: Injector;
+    readonly state: Signal<SignalFormsClassBindingState>;
+}
+
+// @public
+export interface SignalFormsClassBindingState {
+    dirty(): boolean;
+    invalid(): boolean;
+    pending(): boolean;
+    touched(): boolean;
+    valid(): boolean;
+}
+
+// @public
+export interface SignalFormsConfig {
+    classes?: {
+        [className: string]: (formField: SignalFormsClassBinding) => boolean;
+    };
+}
+
+// (No @packageDocumentation comment for this package)
+
+```
diff --git a/goldens/public-api/forms/signals/index.api.md b/goldens/public-api/forms/signals/index.api.md
@@ -16,7 +16,6 @@ import { InputSignal } from '@angular/core';
 import { InputSignalWithTransform } from '@angular/core';
 import { ModelSignal } from '@angular/core';
 import { OutputRef } from '@angular/core';
-import { Provider } from '@angular/core';
 import { ResourceRef } from '@angular/core';
 import { Signal } from '@angular/core';
 import { StandardSchemaV1 } from '@standard-schema/spec';
@@ -191,7 +190,7 @@ export class FormField<T> {
 }
 
 // @public
-export interface FormFieldBinding {
+export interface FormFieldBinding extends SignalFormsClassBinding {
     readonly element: HTMLElement;
     focus(options?: FocusOptions): void;
     readonly injector: Injector;
@@ -554,9 +553,6 @@ export class PatternValidationError extends BaseNgValidationError {
 // @public
 export function provideExperimentalWebMcpForms(): EnvironmentProviders;
 
-// @public
-export function provideSignalFormsConfig(config: SignalFormsConfig): Provider[];
-
 // @public
 export function readonly<TValue, TPathKind extends PathKind = PathKind.Root>(path: SchemaPath<TValue, SchemaPathRules.Supported, TPathKind>, config?: {
     when?: NoInfer<LogicFn<TValue, boolean, TPathKind>>;
@@ -689,13 +685,6 @@ TModel
     [K in keyof TModel]: MaybeSchemaPathTree<TModel[K], PathKind.Child>;
 } : unknown);
 
-// @public
-export interface SignalFormsConfig {
-    classes?: {
-        [className: string]: (formField: FormFieldBinding) => boolean;
-    };
-}
-
 // @public
 export function standardSchemaError(issue: StandardSchemaV1.Issue, options: WithFieldTree<ValidationErrorOptions>): StandardSchemaValidationError;
 

diff --git a/integration/typings_test_ts60/include-all.ts b/integration/typings_test_ts60/include-all.ts
@@ -19,6 +19,7 @@ import * as coreTesting from '@angular/core/testing';
 import * as elements from '@angular/elements';
 import * as forms from '@angular/forms';
 import * as formsSignals from '@angular/forms/signals';
+import * as formsSignalsConfig from '@angular/forms/signals/config';
 import * as localize from '@angular/localize';
 import * as platformBrowser from '@angular/platform-browser';
 import * as platformBrowserDynamic from '@angular/platform-browser-dynamic';
@@ -50,6 +51,7 @@ export default {
   elements,
   forms,
   formsSignals,
+  formsSignalsConfig,
   localize,
   platformBrowser,
   platformBrowserTesting,

diff --git a/packages.bzl b/packages.bzl
@@ -73,6 +73,7 @@ DOCS_ENTRYPOINTS = [
     "core/testing",
     "elements",
     "forms",
+    "forms/signals/config",
     "localize",
     "localize/init",
     "localize/src/localize",

diff --git a/packages/BUILD.bazel b/packages/BUILD.bazel
@@ -108,6 +108,7 @@ filegroup(
         "//packages/forms:forms_docs_extraction",
         "//packages/forms/signals:forms_signals_docs_extraction",
         "//packages/forms/signals/compat:forms_signals_compat_docs_extraction",
+        "//packages/forms/signals/config:forms_signals_config_docs_extraction",
         "//packages/localize:localize_docs_extraction",
         "//packages/localize/src/localize:localize_init_docs_extraction",
         "//packages/platform-browser:platform-browser_docs_extraction",

diff --git a/packages/forms/BUILD.bazel b/packages/forms/BUILD.bazel
@@ -57,6 +57,7 @@ ng_package(
         "//packages/forms",
         "//packages/forms/signals",
         "//packages/forms/signals/compat",
+        "//packages/forms/signals/config",
     ],
 )
 

diff --git a/packages/forms/signals/BUILD.bazel b/packages/forms/signals/BUILD.bazel
@@ -16,6 +16,7 @@ ng_project(
         "//packages/forms",
         "//packages/forms:node_modules/@mcp-b/webmcp-types",
         "//packages/forms:node_modules/@standard-schema/spec",
+        "//packages/forms/signals/config",
     ],
 )
 

diff --git a/packages/forms/signals/compat/BUILD.bazel b/packages/forms/signals/compat/BUILD.bazel
@@ -16,6 +16,7 @@ ng_project(
         "//packages/core/rxjs-interop",
         "//packages/forms",
         "//packages/forms/signals",
+        "//packages/forms/signals/config",
     ],
 )
 

diff --git a/packages/forms/signals/compat/src/api/di.ts b/packages/forms/signals/compat/src/api/di.ts
@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import type {SignalFormsConfig} from '../../../src/api/di';
+import type {SignalFormsConfig} from '../../../config/src/api';
 
 /**
  * A value that can be used for `SignalFormsConfig.classes` to automatically add

diff --git a/packages/forms/signals/config/BUILD.bazel b/packages/forms/signals/config/BUILD.bazel
@@ -0,0 +1,34 @@
+load("//tools:defaults.bzl", "generate_api_docs", "ng_project")
+
+package(default_visibility = ["//visibility:public"])
+
+ng_project(
+    name = "config",
+    srcs = glob(
+        [
+            "*.ts",
+            "src/**/*.ts",
+        ],
+    ),
+    deps = [
+        "//packages/core",
+    ],
+)
+
+filegroup(
+    name = "files_for_docgen",
+    srcs = glob([
+        "*.ts",
+        "src/**/*.ts",
+    ]) + ["PACKAGE.md"],
+)
+
+generate_api_docs(
+    name = "forms_signals_config_docs",
+    srcs = [
+        ":files_for_docgen",
+        "//packages:common_files_and_deps_for_docs",
+    ],
+    entry_point = ":index.ts",
+    module_name = "@angular/forms/signals/config",
+)
diff --git a/packages/forms/signals/config/PACKAGE.md b/packages/forms/signals/config/PACKAGE.md
@@ -0,0 +1,4 @@
+# Configuration APIs for Signal Forms
+
+This package contains configuration helpers for signal-based forms that can be imported without
+bringing in the rest of the signal forms runtime.
diff --git a/packages/forms/signals/config/index.ts b/packages/forms/signals/config/index.ts
@@ -0,0 +1,14 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+
+// This file is not used to build this module. It is only used during editing
+// by the TypeScript language service and during build for verification. `ngc`
+// replaces this file with production index.ts when it rewrites private symbol
+// names.
+
+export * from './public_api';
diff --git a/packages/forms/signals/config/public_api.ts b/packages/forms/signals/config/public_api.ts
@@ -0,0 +1,14 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+
+/**
+ * @module
+ * @description
+ * Entry point for Signal Forms configuration APIs.
+ */
+export * from './src/api';
diff --git a/packages/forms/signals/config/src/api.ts b/packages/forms/signals/config/src/api.ts
@@ -0,0 +1,72 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+
+import {type Injector, type Provider, type Signal} from '@angular/core';
+import {SIGNAL_FORMS_CONFIG} from './di';
+
+/**
+ * The subset of field state APIs used by signal forms CSS class configuration.
+ *
+ * @publicApi 22.0
+ */
+export interface SignalFormsClassBindingState {
+  /** Whether the bound field has been touched. */
+  touched(): boolean;
+
+  /** Whether the bound field is dirty. */
+  dirty(): boolean;
+
+  /** Whether the bound field is valid. */
+  valid(): boolean;
+
+  /** Whether the bound field is invalid. */
+  invalid(): boolean;
+
+  /** Whether the bound field has pending validation. */
+  pending(): boolean;
+}
+
+/**
+ * Represents a binding between a field and a UI control for signal forms configuration.
+ *
+ * @publicApi 22.0
+ */
+export interface SignalFormsClassBinding {
+  /** The HTML element on which the binding is applied. */
+  readonly element: HTMLElement;
+
+  /** The node injector for the element hosting this field binding. */
+  readonly injector: Injector;
+
+  /** The subset of field state available to configuration callbacks. */
+  readonly state: Signal<SignalFormsClassBindingState>;
+
+  /** Focuses this field binding. */
+  focus(options?: FocusOptions): void;
+}
+
+/**
+ * Configuration options for signal forms.
+ *
+ * @publicApi 22.0
+ */
+export interface SignalFormsConfig {
+  /** A map of CSS class names to predicate functions that determine when to apply them. */
+  classes?: {
+    [className: string]: (formField: SignalFormsClassBinding) => boolean;
+  };
+}
+
+/**
+ * Provides configuration options for signal forms.
+ *
+ * @publicApi 22.0
+ */
+export function provideSignalFormsConfig(config: SignalFormsConfig): Provider[] {
+  return [{provide: SIGNAL_FORMS_CONFIG, useValue: config}];
+}
diff --git a/packages/forms/signals/config/src/di.ts b/packages/forms/signals/config/src/di.ts
@@ -0,0 +1,15 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+
+import {InjectionToken} from '@angular/core';
+import type {SignalFormsConfig} from './api';
+
+/** Injection token for the signal forms configuration. */
+export const SIGNAL_FORMS_CONFIG = new InjectionToken<SignalFormsConfig>(
+  typeof ngDevMode !== 'undefined' && ngDevMode ? 'SIGNAL_FORMS_CONFIG' : '',
+);
diff --git a/packages/forms/signals/public_api.ts b/packages/forms/signals/public_api.ts
@@ -12,7 +12,6 @@
  * Entry point for all public APIs of this package.
  */
 export * from './src/api/control';
-export * from './src/api/di';
 export * from './src/api/rules';
 export * from './src/api/rules/debounce';
 export * from './src/api/rules/metadata';

diff --git a/packages/forms/signals/src/api/di.ts b/packages/forms/signals/src/api/di.ts
diff --git a/packages/forms/signals/src/api/types.ts b/packages/forms/signals/src/api/types.ts
@@ -8,6 +8,7 @@
 
 import {Injector, Signal, WritableSignal} from '@angular/core';
 import {AbstractControl} from '@angular/forms';
+import type {SignalFormsClassBinding} from '../../config/src/api';
 import type {FormField} from '../directive/form_field';
 import type {MetadataKey, ValidationError} from './rules';
 
@@ -609,7 +610,7 @@ export type FieldStateByMode<
  *
  * @publicApi 22.0
  */
-export interface FormFieldBinding {
+export interface FormFieldBinding extends SignalFormsClassBinding {
   /**
    * The HTML element on which the {@link FormField} directive is applied.
    */

diff --git a/packages/forms/signals/src/directive/form_field.ts b/packages/forms/signals/src/directive/form_field.ts
@@ -36,7 +36,7 @@ import {type ValidationError} from '../api/rules';
 import type {Field, FieldState} from '../api/types';
 import {InteropNgControl} from '../controls/interop_ng_control';
 import {RuntimeErrorCode} from '../errors';
-import {SIGNAL_FORMS_CONFIG} from '../field/di';
+import {SIGNAL_FORMS_CONFIG} from '../../config/src/di';
 import type {FieldNode} from '../field/node';
 import type {FormUiControl} from '../api/control';
 import {shallowArrayEquals} from '../util/array';