From a67e00741c23d7ae4c93970c026bd7f9d41521ee Mon Sep 17 00:00:00 2001
From: Alex Rickabaugh <alx+alxhub@alxandria.net>
Date: Wed, 14 Jan 2026 16:27:40 -0800
Subject: [PATCH] refactor(forms): move control logic into `FormField`
 directive
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Refactors the `ɵɵcontrolCreate` and `ɵɵcontrol` instructions to delegate control logic to the forms package via new `ɵngControlCreate` and `ɵngControlUpdate` lifecycle hooks. Previously, the logic for binding form state to native elements and custom controls was hardcoded within `@angular/core`.

**Compiler Changes:**
- Introduces a new compilation phase `specializeControlProperties` (in `control_directives.ts`).
- This phase detects properties named `formField` and specializes them into `ControlCreate` and `Control` IR opcodes.
- These opcodes emit `ɵɵcontrolCreate` and `ɵɵcontrol` instructions, respectively.

**Runtime Changes:**
- `ɵɵcontrolCreate` acts as the creation phase. It locates the control directive and invokes its `ɵngControlCreate` method.
- `ɵɵcontrol` acts as the update phase, and invokes the control directive's `ɵngControlUpdate` method (if present).
- Introduces a `passThroughInput` configuration in `ControlFeature`. This specifies the input name (e.g., `formField`) that triggers the control. If the runtime detects that this input is bound to multiple targets (e.g., the `FormField` directive *and* the host component), the control is flagged as "pass-through". In this state, `ɵngControlCreate` returns a no-op update function, deferring responsibility to the other consumer (e.g., the component managing the field itself).

**Forms Changes:**
- `FormField` directive implements `ɵngControlCreate` and `ɵngControlUpdate`.
- Inside this hook, `FormField` determines the type of control it is attached to (Native, CVA, or Custom Signal Control) and delegates to the appropriate handler (`nativeControlCreate`, `cvaControlCreate`, or `customControlCreate`).
- Consolidates all form binding logic within `@angular/forms/signals`, enabling support for new `FormValueControl` and `FormCheckboxControl` interfaces.
- Reorganizes the codebase by moving `FormField` from `api/` to `directive/` and splitting the binding logic into semantic pieces:
    - `control_native.ts`, `control_cva.ts`, and `control_custom.ts` contain the specific handlers for each control type.
    - `native.ts` and `select.ts` provide helpers for native element discovery and select-specific synchronization.
    - `bindings.ts` manages the tracking and application of property/attribute bindings.
---
 goldens/public-api/core/errors.api.md         |    2 -
 .../forms/signals/compat/index.api.md         |    5 -
 goldens/public-api/forms/signals/index.api.md |   40 +-
 .../partial_directive_linker_1.ts             |   12 +
 .../ngtsc/annotations/directive/src/shared.ts |   61 +
 .../ngtsc/typecheck/src/ops/signal_forms.ts   |    2 +-
 .../control_bindings/control_bindings.js      |    7 +-
 .../control_bindings/radio_bindings.js        |   12 +-
 .../compiler/src/compiler_facade_interface.ts |    2 +
 packages/compiler/src/jit_compiler_facade.ts  |    1 +
 packages/compiler/src/render3/partial/api.ts  |    4 +
 .../compiler/src/render3/partial/directive.ts |   13 +
 .../compiler/src/render3/r3_identifiers.ts    |    5 +
 packages/compiler/src/render3/view/api.ts     |   10 +-
 .../compiler/src/render3/view/compiler.ts     |    5 +
 .../template/pipeline/ir/src/expression.ts    |    2 +-
 .../template/pipeline/ir/src/ops/create.ts    |    6 +-
 .../template/pipeline/ir/src/ops/update.ts    |   32 +-
 .../src/template/pipeline/src/emit.ts         |    2 +
 .../src/template/pipeline/src/ingest.ts       |   10 -
 .../src/template/pipeline/src/instruction.ts  |   21 +-
 .../src/phases/attribute_extraction.ts        |   16 -
 .../src/phases/binding_specialization.ts      |    2 -
 .../pipeline/src/phases/control_directives.ts |   71 +
 .../src/template/pipeline/src/phases/reify.ts |    2 +-
 .../src/compiler/compiler_facade_interface.ts |    4 +
 .../core/src/core_render3_private_export.ts   |   10 +-
 packages/core/src/errors.ts                   |    1 -
 packages/core/src/render3/definition.ts       |    1 +
 packages/core/src/render3/dynamic_bindings.ts |   44 +-
 .../src/render3/features/control_feature.ts   |   24 +
 packages/core/src/render3/index.ts            |    5 +-
 .../core/src/render3/instructions/control.ts  | 1171 +++--------------
 .../render3/instructions/let_declaration.ts   |    2 +-
 .../core/src/render3/interfaces/control.ts    |  245 +---
 .../core/src/render3/interfaces/definition.ts |   16 +-
 packages/core/src/render3/interfaces/node.ts  |   31 +-
 packages/core/src/render3/jit/directive.ts    |    1 +
 packages/core/src/render3/jit/environment.ts  |    1 +
 .../core/src/render3/tnode_manipulation.ts    |    2 +-
 packages/core/src/render3/view/listeners.ts   |    6 +-
 .../bundle.golden_symbols.json                |   24 +-
 packages/core/test/render3/is_shape_of.ts     |    2 +-
 packages/forms/signals/public_api.ts          |    2 +-
 packages/forms/signals/src/api/control.ts     |   15 +-
 packages/forms/signals/src/api/di.ts          |    2 +-
 .../signals/src/api/form_field_directive.ts   |  203 ---
 .../api/rules/validation/validation_errors.ts |    2 +-
 packages/forms/signals/src/api/types.ts       |  101 +-
 .../forms/signals/src/directive/bindings.ts   |   84 ++
 .../signals/src/directive/control_custom.ts   |   63 +
 .../signals/src/directive/control_cva.ts      |   58 +
 .../signals/src/directive/control_native.ts   |   80 ++
 .../src/directive/form_field_directive.ts     |  344 +++++
 .../forms/signals/src/directive/native.ts     |  191 +++
 .../forms/signals/src/directive/select.ts     |   80 ++
 packages/forms/signals/src/errors.ts          |    1 +
 packages/forms/signals/src/field/node.ts      |    2 +-
 packages/forms/signals/src/field/state.ts     |    2 +-
 59 files changed, 1547 insertions(+), 1618 deletions(-)
 create mode 100644 packages/compiler/src/template/pipeline/src/phases/control_directives.ts
 create mode 100644 packages/core/src/render3/features/control_feature.ts
 delete mode 100644 packages/forms/signals/src/api/form_field_directive.ts
 create mode 100644 packages/forms/signals/src/directive/bindings.ts
 create mode 100644 packages/forms/signals/src/directive/control_custom.ts
 create mode 100644 packages/forms/signals/src/directive/control_cva.ts
 create mode 100644 packages/forms/signals/src/directive/control_native.ts
 create mode 100644 packages/forms/signals/src/directive/form_field_directive.ts
 create mode 100644 packages/forms/signals/src/directive/native.ts
 create mode 100644 packages/forms/signals/src/directive/select.ts

diff --git a/goldens/public-api/core/errors.api.md b/goldens/public-api/core/errors.api.md
index 2471ef65509..4b59e70feea 100644
--- a/goldens/public-api/core/errors.api.md
+++ b/goldens/public-api/core/errors.api.md
@@ -86,8 +86,6 @@ export const enum RuntimeErrorCode {
     // (undocumented)
     INVALID_FACTORY_DEPENDENCY = 202,
     // (undocumented)
-    INVALID_FIELD_DIRECTIVE_HOST = 318,
-    // (undocumented)
     INVALID_I18N_STRUCTURE = 700,
     // (undocumented)
     INVALID_INHERITANCE = 903,
diff --git a/goldens/public-api/forms/signals/compat/index.api.md b/goldens/public-api/forms/signals/compat/index.api.md
index cb1c8bf349f..52c81d049b8 100644
--- a/goldens/public-api/forms/signals/compat/index.api.md
+++ b/goldens/public-api/forms/signals/compat/index.api.md
@@ -16,11 +16,6 @@ import { Signal } from '@angular/core';
 import { ValidationErrors } from '@angular/forms';
 import { ValidatorFn } from '@angular/forms';
 import { WritableSignal } from '@angular/core';
-import { ɵCONTROL } from '@angular/core';
-import { ɵcontrolUpdate } from '@angular/core';
-import { ɵFieldState } from '@angular/core';
-import { ɵFormFieldBindingOptions } from '@angular/core';
-import { ɵɵcontrolCreate } from '@angular/core';
 
 // @public
 export function compatForm<TModel>(model: WritableSignal<TModel>): FieldTree<TModel>;
diff --git a/goldens/public-api/forms/signals/index.api.md b/goldens/public-api/forms/signals/index.api.md
index 8a7c9c5f46d..e660483e119 100644
--- a/goldens/public-api/forms/signals/index.api.md
+++ b/goldens/public-api/forms/signals/index.api.md
@@ -26,11 +26,6 @@ import { StandardSchemaV1 } from '@standard-schema/spec';
 import { ValidationErrors } from '@angular/forms';
 import { ValidatorFn } from '@angular/forms';
 import { WritableSignal } from '@angular/core';
-import { ɵCONTROL } from '@angular/core';
-import { ɵcontrolUpdate } from '@angular/core';
-import { ɵFieldState } from '@angular/core';
-import { ɵFormFieldBindingOptions } from '@angular/core';
-import { ɵɵcontrolCreate } from '@angular/core';
 
 // @public
 export function apply<TValue>(path: SchemaPath<TValue>, schema: NoInfer<SchemaOrSchemaFn<TValue>>): void;
@@ -132,8 +127,10 @@ export class EmailValidationError extends BaseNgValidationError {
 export type FieldContext<TValue, TPathKind extends PathKind = PathKind.Root> = TPathKind extends PathKind.Item ? ItemFieldContext<TValue> : TPathKind extends PathKind.Child ? ChildFieldContext<TValue> : RootFieldContext<TValue>;
 
 // @public
-export interface FieldState<TValue, TKey extends string | number = string | number> extends ɵFieldState<TValue> {
+export interface FieldState<TValue, TKey extends string | number = string | number> {
+    readonly controlValue: Signal<TValue>;
     readonly dirty: Signal<boolean>;
+    readonly disabled: Signal<boolean>;
     // (undocumented)
     readonly disabledReasons: Signal<readonly DisabledReason[]>;
     // (undocumented)
@@ -144,11 +141,24 @@ export interface FieldState<TValue, TKey extends string | number = string | numb
     readonly hidden: Signal<boolean>;
     readonly invalid: Signal<boolean>;
     readonly keyInParent: Signal<TKey>;
+    markAsDirty(): void;
+    markAsTouched(): void;
+    readonly max?: Signal<number | undefined>;
+    readonly maxLength?: Signal<number | undefined>;
     metadata<M>(key: MetadataKey<M, any, any>): M | undefined;
+    readonly min?: Signal<number | undefined>;
+    readonly minLength?: Signal<number | undefined>;
+    readonly name: Signal<string>;
+    readonly pattern: Signal<readonly RegExp[]>;
     readonly pending: Signal<boolean>;
+    readonly readonly: Signal<boolean>;
+    readonly required: Signal<boolean>;
     reset(value?: TValue): void;
+    setControlValue(value: TValue): void;
     readonly submitting: Signal<boolean>;
+    readonly touched: Signal<boolean>;
     readonly valid: Signal<boolean>;
+    readonly value: WritableSignal<TValue>;
 }
 
 // @public
@@ -177,22 +187,15 @@ export interface FormCheckboxControl extends FormUiControl<boolean> {
 
 // @public
 export class FormField<T> {
-    // (undocumented)
-    readonly [ɵCONTROL]: {
-        readonly create: typeof ɵɵcontrolCreate;
-        readonly update: typeof ɵcontrolUpdate;
-    };
-    // (undocumented)
+    readonly [ɵNgFieldDirective]: true;
     readonly element: HTMLElement;
     readonly errors: Signal<ValidationError.WithFieldTree[]>;
     // (undocumented)
     readonly fieldTree: i0.InputSignal<FieldTree<T>>;
     focus(options?: FocusOptions): void;
-    protected getOrCreateNgControl(): InteropNgControl;
-    // (undocumented)
     readonly injector: Injector;
-    registerAsBinding(bindingOptions?: FormFieldBindingOptions<T>): void;
-    // (undocumented)
+    protected get interopNgControl(): InteropNgControl;
+    registerAsBinding(bindingOptions?: FormFieldBindingOptions): void;
     readonly state: Signal<[T] extends [_angular_forms.AbstractControl<any, any, any>] ? CompatFieldState<T, string | number> : FieldState<T, string | number>>;
     // (undocumented)
     static ɵdir: i0.ɵɵDirectiveDeclaration<FormField<any>, "[formField]", ["formField"], { "fieldTree": { "alias": "formField"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
@@ -201,9 +204,8 @@ export class FormField<T> {
 }
 
 // @public (undocumented)
-export interface FormFieldBindingOptions<TValue> extends ɵFormFieldBindingOptions {
-    focus?(options?: FocusOptions): void;
-    // (undocumented)
+export interface FormFieldBindingOptions {
+    readonly focus?: (focusOptions?: FocusOptions) => void;
     readonly parseErrors?: Signal<ValidationError.WithoutFieldTree[]>;
 }
 
diff --git a/packages/compiler-cli/linker/src/file_linker/partial_linkers/partial_directive_linker_1.ts b/packages/compiler-cli/linker/src/file_linker/partial_linkers/partial_directive_linker_1.ts
index 9a5080b0ede..e8316b21304 100644
--- a/packages/compiler-cli/linker/src/file_linker/partial_linkers/partial_directive_linker_1.ts
+++ b/packages/compiler-cli/linker/src/file_linker/partial_linkers/partial_directive_linker_1.ts
@@ -95,6 +95,9 @@ export function toR3DirectiveMeta<TExpression>(
     lifecycle: {
       usesOnChanges: metaObj.has('usesOnChanges') ? metaObj.getBoolean('usesOnChanges') : false,
     },
+    controlCreate: metaObj.has('controlCreate')
+      ? toControlCreate(metaObj.getObject('controlCreate'))
+      : null,
     name: typeName,
     usesInheritance: metaObj.has('usesInheritance') ? metaObj.getBoolean('usesInheritance') : false,
     isStandalone: metaObj.has('isStandalone')
@@ -133,6 +136,15 @@ function toInputMapping<TExpression>(
   );
 }
 
+function toControlCreate<TExpression>(
+  controlCreate: AstObject<NonNullable<R3DeclareDirectiveMetadata['controlCreate']>, TExpression>,
+) {
+  const passThroughValue = controlCreate.getValue('passThroughInput');
+  return {
+    passThroughInput: passThroughValue.isNull() ? null : passThroughValue.getString(),
+  };
+}
+
 /**
  * Parses the legacy partial output for inputs.
  *
diff --git a/packages/compiler-cli/src/ngtsc/annotations/directive/src/shared.ts b/packages/compiler-cli/src/ngtsc/annotations/directive/src/shared.ts
index 093f9991e6f..0976853bfe1 100644
--- a/packages/compiler-cli/src/ngtsc/annotations/directive/src/shared.ts
+++ b/packages/compiler-cli/src/ngtsc/annotations/directive/src/shared.ts
@@ -318,6 +318,8 @@ export function extractDirectiveMetadata(
       !member.isStatic && member.kind === ClassMemberKind.Method && member.name === 'ngOnChanges',
   );
 
+  const controlCreate = extractControlDirectiveDefinition(members);
+
   // Parse exportAs.
   let exportAs: string[] | null = null;
   if (directive.has('exportAs')) {
@@ -442,6 +444,7 @@ export function extractDirectiveMetadata(
     typeArgumentCount: reflector.getGenericArityOfClass(clazz) || 0,
     typeSourceSpan: createSourceSpan(clazz.name),
     usesInheritance,
+    controlCreate,
     exportAs,
     providers,
     isStandalone,
@@ -1576,6 +1579,64 @@ function assertEmittableInputType(
   })(type);
 }
 
+/**
+ * Extracts the `controlCreate` definition for the private control directive contract from the
+ * directive class.
+ *
+ * This looks for a lifecycle method called `ɵngControlCreate`. If present, a control directive
+ * definition will be extracted, and `ɵɵControlFeature` will be applied to the directive.
+ *
+ * A control directive may declare a pass-through input name, by including a generic type on the
+ * type of the `ControlDirectiveHost` parameter of `ɵngControlCreate`:
+ *
+ * ```ts
+ * class MyControlDirective {
+ *   ɵngControlCreate<T>(host: ControlDirectiveHost<'formField'>): void {}
+ * }
+ * ```
+ *
+ * If present, this will be extracted as the `passThroughInput` property of the control directive
+ * definition.
+ */
+function extractControlDirectiveDefinition(
+  members: ClassMember[],
+): R3DirectiveMetadata['controlCreate'] {
+  const controlCreateMember = members.find(
+    (member) =>
+      !member.isStatic &&
+      member.kind === ClassMemberKind.Method &&
+      member.name === 'ɵngControlCreate',
+  );
+
+  if (
+    controlCreateMember === undefined ||
+    controlCreateMember.node === null ||
+    !ts.isMethodDeclaration(controlCreateMember.node)
+  ) {
+    return null;
+  }
+
+  const {node} = controlCreateMember;
+  if (
+    node.parameters.length === 0 ||
+    node.parameters[0].type === undefined ||
+    !ts.isTypeReferenceNode(node.parameters[0].type)
+  ) {
+    return {passThroughInput: null};
+  }
+
+  const type = node.parameters[0].type;
+  if (
+    type.typeArguments?.length !== 1 ||
+    !ts.isLiteralTypeNode(type.typeArguments[0]) ||
+    !ts.isStringLiteral(type.typeArguments[0].literal)
+  ) {
+    return {passThroughInput: null};
+  }
+
+  return {passThroughInput: type.typeArguments[0].literal.text};
+}
+
 /**
  * Iterates through all specified class members and attempts to detect
  * view and content queries defined.
diff --git a/packages/compiler-cli/src/ngtsc/typecheck/src/ops/signal_forms.ts b/packages/compiler-cli/src/ngtsc/typecheck/src/ops/signal_forms.ts
index 02c9fb86bbb..e316e9372d5 100644
--- a/packages/compiler-cli/src/ngtsc/typecheck/src/ops/signal_forms.ts
+++ b/packages/compiler-cli/src/ngtsc/typecheck/src/ops/signal_forms.ts
@@ -299,7 +299,7 @@ export function isFieldDirective(meta: TypeCheckableDirectiveMeta): boolean {
         ts.isPropertyDeclaration(member) &&
         ts.isComputedPropertyName(member.name) &&
         ts.isIdentifier(member.name.expression) &&
-        member.name.expression.text === 'ɵCONTROL',
+        member.name.expression.text === 'ɵNgFieldDirective',
     )
   );
 }
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_bindings/control_bindings/control_bindings.js b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_bindings/control_bindings/control_bindings.js
index 3747a4f6aab..3b432577717 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_bindings/control_bindings/control_bindings.js
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_bindings/control_bindings/control_bindings.js
@@ -4,7 +4,7 @@ export class MyComponent {
     type: MyComponent,
     selectors: [["ng-component"]],
     decls: 4,
-    vars: 3,
+    vars: 2,
     consts: [["formField", "Not a form control"], [3, "formField"]],
     template: function MyComponent_Template(rf, ctx) {
       if (rf & 1) {
@@ -19,10 +19,11 @@ export class MyComponent {
         i0.ɵɵadvance();
         i0.ɵɵattribute("formField", ctx.value);
         i0.ɵɵadvance(2);
-        i0.ɵɵcontrol(ctx.value, "formField");
+        i0.ɵɵproperty("formField", ctx.value);
+        i0.ɵɵcontrol();
       }
     },
     dependencies: [FormField],
     encapsulation: 2
   });
-}
+}
\ No newline at end of file
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_bindings/control_bindings/radio_bindings.js b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_bindings/control_bindings/radio_bindings.js
index 6d610d17aad..4662c16f84b 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_bindings/control_bindings/radio_bindings.js
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_bindings/control_bindings/radio_bindings.js
@@ -4,7 +4,7 @@ export class MyComponent {
     type: MyComponent,
     selectors: [["ng-component"]],
     decls: 2,
-    vars: 6,
+    vars: 4,
     consts: [["type", "radio", "id", "radio", 3, "formField", "value"], ["type", "radio", "id", "radio", 3, "value", "formField"]],
     template: function MyComponent_Template(rf, ctx) {
       if (rf & 1) {
@@ -14,14 +14,14 @@ export class MyComponent {
         i0.ɵɵcontrolCreate();
       }
       if (rf & 2) {
-        i0.ɵɵproperty("value", "foo");
-        i0.ɵɵcontrol(ctx.value, "formField");
+        i0.ɵɵproperty("formField", ctx.value)("value", "foo");
+        i0.ɵɵcontrol();
         i0.ɵɵadvance();
-        i0.ɵɵproperty("value", "foo");
-        i0.ɵɵcontrol(ctx.value, "formField");
+        i0.ɵɵproperty("value", "foo")("formField", ctx.value);
+        i0.ɵɵcontrol();
       }
     },
     dependencies: [FormField],
     encapsulation: 2
   });
-}
+}
\ No newline at end of file
diff --git a/packages/compiler/src/compiler_facade_interface.ts b/packages/compiler/src/compiler_facade_interface.ts
index dc3277aca20..f0c74e137ce 100644
--- a/packages/compiler/src/compiler_facade_interface.ts
+++ b/packages/compiler/src/compiler_facade_interface.ts
@@ -198,6 +198,7 @@ export interface R3DirectiveMetadataFacade {
   inputs: (string | {name: string; alias?: string; required?: boolean})[];
   outputs: string[];
   usesInheritance: boolean;
+  controlCreate: {passThroughInput: string | null} | null;
   exportAs: string[] | null;
   providers: Provider[] | null;
   viewQueries: R3QueryMetadataFacade[];
@@ -253,6 +254,7 @@ export interface R3DeclareDirectiveFacade {
   exportAs?: string[];
   usesInheritance?: boolean;
   usesOnChanges?: boolean;
+  controlCreate?: {passThroughInput: string | null};
   isStandalone?: boolean;
   isSignal?: boolean;
   hostDirectives?: R3HostDirectiveMetadataFacade[] | null;
diff --git a/packages/compiler/src/jit_compiler_facade.ts b/packages/compiler/src/jit_compiler_facade.ts
index 810e82bbcba..ed623ee9cc3 100644
--- a/packages/compiler/src/jit_compiler_facade.ts
+++ b/packages/compiler/src/jit_compiler_facade.ts
@@ -560,6 +560,7 @@ function convertDeclareDirectiveFacadeToMetadata(
       declaration.providers !== undefined ? new WrappedNodeExpr(declaration.providers) : null,
     exportAs: declaration.exportAs ?? null,
     usesInheritance: declaration.usesInheritance ?? false,
+    controlCreate: declaration.controlCreate ?? null,
     lifecycle: {usesOnChanges: declaration.usesOnChanges ?? false},
     deps: null,
     typeArgumentCount: 0,
diff --git a/packages/compiler/src/render3/partial/api.ts b/packages/compiler/src/render3/partial/api.ts
index 8369c0399e7..1c90823a245 100644
--- a/packages/compiler/src/render3/partial/api.ts
+++ b/packages/compiler/src/render3/partial/api.ts
@@ -131,6 +131,10 @@ export interface R3DeclareDirectiveMetadata extends R3PartialDeclaration {
    */
   usesOnChanges?: boolean;
 
+  controlCreate?: {
+    passThroughInput: string | null;
+  };
+
   /**
    * Whether the directive is standalone. Defaults to false.
    */
diff --git a/packages/compiler/src/render3/partial/directive.ts b/packages/compiler/src/render3/partial/directive.ts
index c0564947223..087dff97381 100644
--- a/packages/compiler/src/render3/partial/directive.ts
+++ b/packages/compiler/src/render3/partial/directive.ts
@@ -98,6 +98,19 @@ export function createDirectiveDefinitionMap(
     definitionMap.set('usesOnChanges', o.literal(true));
   }
 
+  if (meta.controlCreate) {
+    definitionMap.set(
+      'controlCreate',
+      o.literalMap([
+        {
+          key: 'passThroughInput',
+          value: o.literal(meta.controlCreate.passThroughInput),
+          quoted: false,
+        },
+      ]),
+    );
+  }
+
   if (meta.hostDirectives?.length) {
     definitionMap.set('hostDirectives', createHostDirectives(meta.hostDirectives));
   }
diff --git a/packages/compiler/src/render3/r3_identifiers.ts b/packages/compiler/src/render3/r3_identifiers.ts
index 3243cc4657d..45c1bf00473 100644
--- a/packages/compiler/src/render3/r3_identifiers.ts
+++ b/packages/compiler/src/render3/r3_identifiers.ts
@@ -424,6 +424,11 @@ export class Identifiers {
 
   static NgOnChangesFeature: o.ExternalReference = {name: 'ɵɵNgOnChangesFeature', moduleName: CORE};
 
+  static ControlFeature: o.ExternalReference = {
+    name: 'ɵɵControlFeature',
+    moduleName: CORE,
+  };
+
   static InheritDefinitionFeature: o.ExternalReference = {
     name: 'ɵɵInheritDefinitionFeature',
     moduleName: CORE,
diff --git a/packages/compiler/src/render3/view/api.ts b/packages/compiler/src/render3/view/api.ts
index 59724daa792..471c9209caf 100644
--- a/packages/compiler/src/render3/view/api.ts
+++ b/packages/compiler/src/render3/view/api.ts
@@ -91,6 +91,11 @@ export interface R3DirectiveMetadata {
    */
   usesInheritance: boolean;
 
+  /**
+   * Whether or not the component or directive uses the private `ɵngControlCreate` hook.
+   */
+  controlCreate: {passThroughInput: string | null} | null;
+
   /**
    * Reference name under which to export the directive's type in a template,
    * if any.
@@ -192,8 +197,9 @@ export const enum DeclarationListEmitMode {
 /**
  * Information needed to compile a component for the render3 runtime.
  */
-export interface R3ComponentMetadata<DeclarationT extends R3TemplateDependency>
-  extends R3DirectiveMetadata {
+export interface R3ComponentMetadata<
+  DeclarationT extends R3TemplateDependency,
+> extends R3DirectiveMetadata {
   /**
    * Information about the component's template.
    */
diff --git a/packages/compiler/src/render3/view/compiler.ts b/packages/compiler/src/render3/view/compiler.ts
index 01997567035..77ac761b57a 100644
--- a/packages/compiler/src/render3/view/compiler.ts
+++ b/packages/compiler/src/render3/view/compiler.ts
@@ -148,6 +148,11 @@ function addFeatures(
   if (meta.lifecycle.usesOnChanges) {
     features.push(o.importExpr(R3.NgOnChangesFeature));
   }
+  if (meta.controlCreate !== null) {
+    features.push(
+      o.importExpr(R3.ControlFeature).callFn([o.literal(meta.controlCreate.passThroughInput)]),
+    );
+  }
   if ('externalStyles' in meta && meta.externalStyles?.length) {
     const externalStyleNodes = meta.externalStyles.map((externalStyle) => o.literal(externalStyle));
     features.push(
diff --git a/packages/compiler/src/template/pipeline/ir/src/expression.ts b/packages/compiler/src/template/pipeline/ir/src/expression.ts
index 8b06aacb072..b58ac5f74b4 100644
--- a/packages/compiler/src/template/pipeline/ir/src/expression.ts
+++ b/packages/compiler/src/template/pipeline/ir/src/expression.ts
@@ -1168,7 +1168,6 @@ export function transformExpressionsInOp(
     case OpKind.Property:
     case OpKind.DomProperty:
     case OpKind.Attribute:
-    case OpKind.Control:
       if (op.expression instanceof Interpolation) {
         transformExpressionsInInterpolation(op.expression, transform, flags);
       } else {
@@ -1299,6 +1298,7 @@ export function transformExpressionsInOp(
     case OpKind.SourceLocation:
     case OpKind.ConditionalCreate:
     case OpKind.ConditionalBranchCreate:
+    case OpKind.Control:
     case OpKind.ControlCreate:
       // These operations contain no expressions.
       break;
diff --git a/packages/compiler/src/template/pipeline/ir/src/ops/create.ts b/packages/compiler/src/template/pipeline/ir/src/ops/create.ts
index f850516157f..ac6ab218f8a 100644
--- a/packages/compiler/src/template/pipeline/ir/src/ops/create.ts
+++ b/packages/compiler/src/template/pipeline/ir/src/ops/create.ts
@@ -1964,7 +1964,11 @@ export interface ControlCreateOp extends Op<CreateOp> {
 
 /** Creates a {@link ControlCreateOp}. */
 export function createControlCreateOp(sourceSpan: ParseSourceSpan): ControlCreateOp {
-  return {kind: OpKind.ControlCreate, sourceSpan, ...NEW_OP};
+  return {
+    kind: OpKind.ControlCreate,
+    sourceSpan,
+    ...NEW_OP,
+  };
 }
 
 /**
diff --git a/packages/compiler/src/template/pipeline/ir/src/ops/update.ts b/packages/compiler/src/template/pipeline/ir/src/ops/update.ts
index 1769b400123..bf4adc2041e 100644
--- a/packages/compiler/src/template/pipeline/ir/src/ops/update.ts
+++ b/packages/compiler/src/template/pipeline/ir/src/ops/update.ts
@@ -295,9 +295,7 @@ export function createPropertyOp(
  * A logical operation representing the property binding side of a two-way binding in the update IR.
  */
 export interface TwoWayPropertyOp
-  extends Op<UpdateOp>,
-    ConsumesVarsTrait,
-    DependsOnSlotContextOpTrait {
+  extends Op<UpdateOp>, ConsumesVarsTrait, DependsOnSlotContextOpTrait {
   kind: OpKind.TwoWayProperty;
 
   /**
@@ -668,9 +666,7 @@ export function createAdvanceOp(delta: number, sourceSpan: ParseSourceSpan): Adv
  * Logical operation representing a conditional expression in the update IR.
  */
 export interface ConditionalOp
-  extends Op<ConditionalOp>,
-    DependsOnSlotContextOpTrait,
-    ConsumesVarsTrait {
+  extends Op<ConditionalOp>, DependsOnSlotContextOpTrait, ConsumesVarsTrait {
   kind: OpKind.Conditional;
 
   /**
@@ -880,9 +876,7 @@ export function createDeferWhenOp(
  * may want to split these into two different op types, deriving from the same base class.
  */
 export interface I18nExpressionOp
-  extends Op<UpdateOp>,
-    ConsumesVarsTrait,
-    DependsOnSlotContextOpTrait {
+  extends Op<UpdateOp>, ConsumesVarsTrait, DependsOnSlotContextOpTrait {
   kind: OpKind.I18nExpression;
 
   /**
@@ -1067,28 +1061,18 @@ export function createStoreLetOp(
 /**
  * A specialized {@link PropertyOp} that may bind a form field to a control.
  */
-// TODO: Omit name when we remove the `Field` directive.
-export interface ControlOp extends Omit<PropertyOp, 'kind'> {
+export interface ControlOp extends Op<UpdateOp>, DependsOnSlotContextOpTrait {
   kind: OpKind.Control;
+  sourceSpan: ParseSourceSpan;
 }
 
 /** Creates a {@link ControlOp}. */
-export function createControlOp(op: BindingOp): ControlOp {
+export function createControlOp(target: XrefId, sourceSpan: ParseSourceSpan): ControlOp {
   return {
     kind: OpKind.Control,
-    target: op.target,
-    name: op.name,
-    expression: op.expression,
-    bindingKind: op.bindingKind,
-    securityContext: op.securityContext,
-    sanitizer: null,
-    isStructuralTemplateAttribute: op.isStructuralTemplateAttribute,
-    templateKind: op.templateKind,
-    i18nContext: op.i18nContext,
-    i18nMessage: op.i18nMessage,
-    sourceSpan: op.sourceSpan,
+    sourceSpan,
+    target,
     ...TRAIT_DEPENDS_ON_SLOT_CONTEXT,
-    ...TRAIT_CONSUMES_VARS,
     ...NEW_OP,
   };
 }
diff --git a/packages/compiler/src/template/pipeline/src/emit.ts b/packages/compiler/src/template/pipeline/src/emit.ts
index d76046e9278..1437a13b5a6 100644
--- a/packages/compiler/src/template/pipeline/src/emit.ts
+++ b/packages/compiler/src/template/pipeline/src/emit.ts
@@ -87,6 +87,7 @@ import {countVariables} from './phases/var_counting';
 import {optimizeVariables} from './phases/variable_optimization';
 import {wrapI18nIcus} from './phases/wrap_icus';
 import {generateArrowFunctions} from './phases/generate_arrow_functions';
+import {specializeControlProperties} from './phases/control_directives';
 
 type Phase =
   | {
@@ -112,6 +113,7 @@ const phases: Phase[] = [
   {kind: Kind.Both, fn: deduplicateTextBindings},
   {kind: Kind.Both, fn: specializeStyleBindings},
   {kind: Kind.Both, fn: specializeBindings},
+  {kind: Kind.Tmpl, fn: specializeControlProperties},
   {kind: Kind.Both, fn: convertAnimations},
   {kind: Kind.Both, fn: extractAttributes},
   {kind: Kind.Tmpl, fn: createI18nContexts},
diff --git a/packages/compiler/src/template/pipeline/src/ingest.ts b/packages/compiler/src/template/pipeline/src/ingest.ts
index 40d02174a12..ee708d2f19e 100644
--- a/packages/compiler/src/template/pipeline/src/ingest.ts
+++ b/packages/compiler/src/template/pipeline/src/ingest.ts
@@ -316,16 +316,6 @@ function ingestElement(unit: ViewCompilationUnit, element: t.Element): void {
   const endOp = ir.createElementEndOp(id, element.endSourceSpan ?? element.startSourceSpan);
   unit.create.push(endOp);
 
-  // We want to ensure that the controlCreateOp is after the ops that create the element
-  const fieldInput = element.inputs.find(
-    (input) => input.name === 'formField' && input.type === e.BindingType.Property,
-  );
-  if (fieldInput) {
-    // If the input name is 'formField', this could be a form control binding which requires a
-    // `ControlCreateOp` to properly initialize.
-    unit.create.push(ir.createControlCreateOp(fieldInput.sourceSpan));
-  }
-
   // If there is an i18n message associated with this element, insert i18n start and end ops.
   if (i18nBlockId !== null) {
     ir.OpList.insertBefore<ir.CreateOp>(
diff --git a/packages/compiler/src/template/pipeline/src/instruction.ts b/packages/compiler/src/template/pipeline/src/instruction.ts
index 101c7b23343..0af2ac647d5 100644
--- a/packages/compiler/src/template/pipeline/src/instruction.ts
+++ b/packages/compiler/src/template/pipeline/src/instruction.ts
@@ -595,26 +595,11 @@ export function property(
   return propertyBase(Identifiers.property, name, expression, sanitizer, sourceSpan);
 }
 
-export function control(
-  name: string,
-  expression: o.Expression | ir.Interpolation,
-  sanitizer: o.Expression | null,
-  sourceSpan: ParseSourceSpan,
-): ir.UpdateOp {
-  const args = [];
-  if (expression instanceof ir.Interpolation) {
-    args.push(interpolationToExpression(expression, sourceSpan));
-  } else {
-    args.push(expression);
-  }
-  args.push(o.literal(name));
-  if (sanitizer !== null) {
-    args.push(sanitizer);
-  }
-  return call(Identifiers.control, args, sourceSpan);
+export function control(sourceSpan: ParseSourceSpan | null): ir.UpdateOp {
+  return call(Identifiers.control, [], sourceSpan);
 }
 
-export function controlCreate(sourceSpan: ParseSourceSpan): ir.CreateOp {
+export function controlCreate(sourceSpan: ParseSourceSpan | null): ir.CreateOp {
   return call(Identifiers.controlCreate, [], sourceSpan);
 }
 
diff --git a/packages/compiler/src/template/pipeline/src/phases/attribute_extraction.ts b/packages/compiler/src/template/pipeline/src/phases/attribute_extraction.ts
index b6be86ef9e2..671a09becf9 100644
--- a/packages/compiler/src/template/pipeline/src/phases/attribute_extraction.ts
+++ b/packages/compiler/src/template/pipeline/src/phases/attribute_extraction.ts
@@ -55,22 +55,6 @@ export function extractAttributes(job: CompilationJob): void {
             );
           }
           break;
-        case ir.OpKind.Control:
-          ir.OpList.insertBefore<ir.CreateOp>(
-            // Deliberately null i18nMessage value
-            ir.createExtractedAttributeOp(
-              op.target,
-              ir.BindingKind.Property,
-              null,
-              op.name,
-              /* expression */ null,
-              /* i18nContext */ null,
-              /* i18nMessage */ null,
-              op.securityContext,
-            ),
-            lookupElement(elements, op.target),
-          );
-          break;
         case ir.OpKind.TwoWayProperty:
           ir.OpList.insertBefore<ir.CreateOp>(
             ir.createExtractedAttributeOp(
diff --git a/packages/compiler/src/template/pipeline/src/phases/binding_specialization.ts b/packages/compiler/src/template/pipeline/src/phases/binding_specialization.ts
index 0dfc2df1dec..5348e146a74 100644
--- a/packages/compiler/src/template/pipeline/src/phases/binding_specialization.ts
+++ b/packages/compiler/src/template/pipeline/src/phases/binding_specialization.ts
@@ -127,8 +127,6 @@ export function specializeBindings(job: CompilationJob): void {
                 op.sourceSpan,
               ),
             );
-          } else if (op.name === 'formField') {
-            ir.OpList.replace<ir.UpdateOp>(op, ir.createControlOp(op));
           } else {
             ir.OpList.replace<ir.UpdateOp>(
               op,
diff --git a/packages/compiler/src/template/pipeline/src/phases/control_directives.ts b/packages/compiler/src/template/pipeline/src/phases/control_directives.ts
new file mode 100644
index 00000000000..d83d3d6a731
--- /dev/null
+++ b/packages/compiler/src/template/pipeline/src/phases/control_directives.ts
@@ -0,0 +1,71 @@
+/**
+ * @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 * as ir from '../../ir';
+import type {ComponentCompilationJob, ViewCompilationUnit} from '../compilation';
+
+const ELIGIBLE_CONTROL_PROPERTIES = new Set(['formField']);
+
+export function specializeControlProperties(job: ComponentCompilationJob): void {
+  for (const unit of job.units) {
+    processView(unit);
+  }
+}
+
+function processView(view: ViewCompilationUnit): void {
+  for (const op of view.update) {
+    if (op.kind !== ir.OpKind.Property) {
+      continue;
+    }
+
+    if (ELIGIBLE_CONTROL_PROPERTIES.has(op.name)) {
+      addControlInstruction(view, op);
+    }
+  }
+}
+
+const CONTROL_OP_CREATE_KINDS = new Set([
+  ir.OpKind.Container,
+  ir.OpKind.ContainerStart,
+  ir.OpKind.ContainerEnd,
+  ir.OpKind.Element,
+  ir.OpKind.ElementStart,
+  ir.OpKind.ElementEnd,
+  ir.OpKind.Template,
+]);
+
+function isRelevantCreateOp(createOp: ir.CreateOp): createOp is ir.CreateOp & {xref: ir.XrefId} {
+  return CONTROL_OP_CREATE_KINDS.has(createOp.kind);
+}
+
+function findCreateInstruction(view: ViewCompilationUnit, target: ir.XrefId): ir.CreateOp | null {
+  let lastFoundOp: ir.CreateOp | null = null;
+  for (const createOp of view.create) {
+    if (!isRelevantCreateOp(createOp) || createOp.xref !== target) {
+      continue;
+    }
+
+    lastFoundOp = createOp;
+  }
+
+  return lastFoundOp;
+}
+
+function addControlInstruction(view: ViewCompilationUnit, propertyOp: ir.PropertyOp): void {
+  const targetCreateOp = findCreateInstruction(view, propertyOp.target);
+  if (targetCreateOp === null) {
+    throw new Error(`No create instruction found for control target ${propertyOp.target}`);
+  }
+
+  const controlCreateOp = ir.createControlCreateOp(propertyOp.sourceSpan);
+  ir.OpList.insertAfter<ir.CreateOp>(controlCreateOp, targetCreateOp);
+  ir.OpList.insertAfter<ir.UpdateOp>(
+    ir.createControlOp(propertyOp.target, propertyOp.sourceSpan),
+    propertyOp,
+  );
+}
diff --git a/packages/compiler/src/template/pipeline/src/phases/reify.ts b/packages/compiler/src/template/pipeline/src/phases/reify.ts
index 6895e60b2d4..ca89a722727 100644
--- a/packages/compiler/src/template/pipeline/src/phases/reify.ts
+++ b/packages/compiler/src/template/pipeline/src/phases/reify.ts
@@ -752,7 +752,7 @@ function reifyProperty(op: ir.PropertyOp): ir.UpdateOp {
 }
 
 function reifyControl(op: ir.ControlOp): ir.UpdateOp {
-  return ng.control(op.name, op.expression, op.sanitizer, op.sourceSpan);
+  return ng.control(op.sourceSpan);
 }
 
 function reifyIrExpression(unit: CompilationUnit, expr: o.Expression): o.Expression {
diff --git a/packages/core/src/compiler/compiler_facade_interface.ts b/packages/core/src/compiler/compiler_facade_interface.ts
index 6af8b15bb59..5d45064d2ca 100644
--- a/packages/core/src/compiler/compiler_facade_interface.ts
+++ b/packages/core/src/compiler/compiler_facade_interface.ts
@@ -198,6 +198,7 @@ export interface R3DirectiveMetadataFacade {
   inputs: (string | {name: string; alias?: string; required?: boolean})[];
   outputs: string[];
   usesInheritance: boolean;
+  controlCreate: {passThroughInput: string | null} | null;
   exportAs: string[] | null;
   providers: Provider[] | null;
   viewQueries: R3QueryMetadataFacade[];
@@ -253,6 +254,9 @@ export interface R3DeclareDirectiveFacade {
   exportAs?: string[];
   usesInheritance?: boolean;
   usesOnChanges?: boolean;
+  controlCreate?: {
+    passThroughInput: string | null;
+  };
   isStandalone?: boolean;
   hostDirectives?: R3HostDirectiveMetadataFacade[] | null;
   isSignal?: boolean;
diff --git a/packages/core/src/core_render3_private_export.ts b/packages/core/src/core_render3_private_export.ts
index 3f184ce9127..d1b870cb07c 100644
--- a/packages/core/src/core_render3_private_export.ts
+++ b/packages/core/src/core_render3_private_export.ts
@@ -55,7 +55,7 @@ export {
   BaseDirectiveDebugMetadata as ɵBaseDirectiveDebugMetadata,
   ComponentDef as ɵComponentDef,
   ComponentType as ɵComponentType,
-  ɵcontrolUpdate,
+  ControlDirectiveHost as ɵControlDirectiveHost,
   CssSelectorList as ɵCssSelectorList,
   ɵDEFER_BLOCK_CONFIG,
   ɵDEFER_BLOCK_DEPENDENCY_INTERCEPTOR,
@@ -103,6 +103,7 @@ export {
   ɵɵcontentQuerySignal,
   ɵɵcontrol,
   ɵɵcontrolCreate,
+  ɵɵControlFeature,
   ɵɵdeclareLet,
   ɵɵdefer,
   ɵɵdeferEnableTimerScheduling,
@@ -250,13 +251,6 @@ export {
 } from './render3/index';
 export {CONTAINER_HEADER_OFFSET as ɵCONTAINER_HEADER_OFFSET} from './render3/interfaces/container';
 export {LContext as ɵLContext} from './render3/interfaces/context';
-export {
-  ɵCONTROL,
-  ɵFieldState,
-  ɵFormFieldBindingOptions,
-  ɵFormFieldDirective,
-  ɵInteropControl,
-} from './render3/interfaces/control';
 export {setDocument as ɵsetDocument} from './render3/interfaces/document';
 export {
   compileComponent as ɵcompileComponent,
diff --git a/packages/core/src/errors.ts b/packages/core/src/errors.ts
index f44afebf30c..7403d061f01 100644
--- a/packages/core/src/errors.ts
+++ b/packages/core/src/errors.ts
@@ -64,7 +64,6 @@ export const enum RuntimeErrorCode {
   NO_BINDING_TARGET = 315,
   INVALID_BINDING_TARGET = 316,
   INVALID_SET_INPUT_CALL = 317,
-  INVALID_FIELD_DIRECTIVE_HOST = 318,
 
   // Bootstrap Errors
   MULTIPLE_PLATFORMS = 400,
diff --git a/packages/core/src/render3/definition.ts b/packages/core/src/render3/definition.ts
index baadb1f29c2..ab29c44219d 100644
--- a/packages/core/src/render3/definition.ts
+++ b/packages/core/src/render3/definition.ts
@@ -642,6 +642,7 @@ function getNgDirectiveDef<T>(directiveDefinition: DirectiveDefinition<T>): Dire
     setInput: null,
     resolveHostDirectives: null,
     hostDirectives: null,
+    controlDef: null,
     inputs: parseAndConvertInputsForDefinition(directiveDefinition.inputs, declaredInputs),
     outputs: parseAndConvertOutputsForDefinition(directiveDefinition.outputs),
     debugInfo: null,
diff --git a/packages/core/src/render3/dynamic_bindings.ts b/packages/core/src/render3/dynamic_bindings.ts
index 1b2cad946fd..4b17d6170ab 100644
--- a/packages/core/src/render3/dynamic_bindings.ts
+++ b/packages/core/src/render3/dynamic_bindings.ts
@@ -12,10 +12,9 @@ import {RuntimeError, RuntimeErrorCode} from '../errors';
 import {Type, Writable} from '../interface/type';
 import {assertNotDefined} from '../util/assert';
 import {bindingUpdated} from './bindings';
+import {controlCreateInternal, controlUpdateInternal} from './instructions/control';
 import {markViewDirty} from './instructions/mark_view_dirty';
 import {setDirectiveInput, storePropertyBindingMetadata} from './instructions/shared';
-import {ɵCONTROL} from './interfaces/control';
-import {TNode} from './interfaces/node';
 import {TVIEW} from './interfaces/view';
 import {getCurrentTNode, getLView, getSelectedTNode, nextBindingIndex} from './state';
 import {stringifyForError} from './util/stringify_utils';
@@ -43,10 +42,10 @@ export interface BindingInternal extends Binding {
   targetIdx?: number;
 
   /** Callback that will be invoked during creation. */
-  create?(): void;
+  create?(slot?: number): void;
 
   /** Callback that will be invoked during updates. */
-  update?(): void;
+  update?(slot?: number): void;
 }
 
 /**
@@ -61,9 +60,14 @@ export interface DirectiveWithBindings<T> {
 }
 
 // These are constant between all the bindings so we can reuse the objects.
-const INPUT_BINDING_METADATA: BindingInternal[typeof BINDING] = {kind: 'input', requiredVars: 1};
-const FIELD_BINDING_METADATA: BindingInternal[typeof BINDING] = {kind: 'field', requiredVars: 2};
-const OUTPUT_BINDING_METADATA: BindingInternal[typeof BINDING] = {kind: 'output', requiredVars: 0};
+const INPUT_BINDING_METADATA: BindingInternal[typeof BINDING] = {
+  kind: 'input',
+  requiredVars: 1,
+};
+const OUTPUT_BINDING_METADATA: BindingInternal[typeof BINDING] = {
+  kind: 'output',
+  requiredVars: 0,
+};
 
 // TODO(pk): this is a sketch of an input binding instruction that still needs some cleanups
 // - take an index of a directive on TNode (as matched), review all the index mappings that we need to do
@@ -103,23 +107,6 @@ function inputBindingUpdate(targetDirectiveIdx: number, publicName: string, valu
   }
 }
 
-/**
- * Instructions for dynamically binding a `Field` to a form control.
- */
-interface ControlBinding {
-  create: () => void;
-  update: () => void;
-}
-
-/**
- * Returns a {@link ControlBinding} for the target directive if it is a 'FormField' directive.
- */
-function controlBinding(binding: BindingInternal, tNode: TNode): ControlBinding | undefined {
-  const lView = getLView();
-  const directive = lView[tNode.directiveStart + binding.targetIdx!];
-  return directive[ɵCONTROL];
-}
-
 /**
  * Creates an input binding.
  * @param publicName Public name of the input to bind to.
@@ -142,17 +129,14 @@ function controlBinding(binding: BindingInternal, tNode: TNode): ControlBinding
 export function inputBinding(publicName: string, value: () => unknown): Binding {
   if (publicName === 'formField') {
     const binding: BindingInternal = {
-      [BINDING]: FIELD_BINDING_METADATA,
+      [BINDING]: INPUT_BINDING_METADATA,
       create: () => {
-        // Set up the form control bindings, if this is a 'FormField' directive bound to a form control.
-        controlBinding(binding, getCurrentTNode()!)?.create();
+        controlCreateInternal();
       },
       update: () => {
         // Update the [formField] input binding, regardless of whether this targets a 'FormField' directive.
         inputBindingUpdate(binding.targetIdx!, publicName, value());
-
-        // Update the form control bindings, if this is a 'FormField' directive bound to a form control.
-        controlBinding(binding, getSelectedTNode()!)?.update();
+        controlUpdateInternal();
       },
     };
     return binding;
diff --git a/packages/core/src/render3/features/control_feature.ts b/packages/core/src/render3/features/control_feature.ts
new file mode 100644
index 00000000000..801ac9e6d74
--- /dev/null
+++ b/packages/core/src/render3/features/control_feature.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 {ControlDirectiveHost} from '../interfaces/control';
+import {DirectiveDef} from '../interfaces/definition';
+
+export function ɵɵControlFeature(passThroughInput: string | null) {
+  return (definition: DirectiveDef<unknown>) => {
+    definition.controlDef = {
+      create: (inst: unknown, host: ControlDirectiveHost): void => {
+        (inst as any)?.ɵngControlCreate(host);
+      },
+      update: (inst: unknown, host: ControlDirectiveHost): void => {
+        (inst as any)?.ɵngControlUpdate?.(host);
+      },
+      passThroughInput,
+    };
+  };
+}
diff --git a/packages/core/src/render3/index.ts b/packages/core/src/render3/index.ts
index 928131132ec..25b1ec91864 100644
--- a/packages/core/src/render3/index.ts
+++ b/packages/core/src/render3/index.ts
@@ -6,11 +6,13 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 import {ɵɵdefineComponent, ɵɵdefineDirective, ɵɵdefineNgModule, ɵɵdefinePipe} from './definition';
+import {ɵɵControlFeature} from './features/control_feature';
 import {ɵɵHostDirectivesFeature} from './features/host_directives_feature';
 import {ɵɵInheritDefinitionFeature} from './features/inherit_definition_feature';
 import {ɵɵNgOnChangesFeature} from './features/ng_onchanges_feature';
 import {ɵɵProvidersFeature} from './features/providers_feature';
 import {ɵɵExternalStylesFeature} from './features/external_styles_feature';
+import {ControlDirectiveHost} from './interfaces/control';
 import {
   ComponentDef,
   ComponentTemplate,
@@ -95,7 +97,6 @@ export {
   ɵɵproperty,
   ɵɵcontrol,
   ɵɵcontrolCreate,
-  ɵcontrolUpdate,
   ɵɵcontentQuery,
   ɵɵcontentQuerySignal,
   ɵɵloadQuery,
@@ -222,6 +223,7 @@ export {
   AcxDirectiveDebugMetadata,
   AcxComponentDebugMetadata,
   WizComponentDebugMetadata,
+  ControlDirectiveHost,
   DirectiveDebugMetadata,
   DirectiveDef,
   DirectiveType,
@@ -238,6 +240,7 @@ export {
   ɵɵdefinePipe,
   ɵɵDirectiveDeclaration,
   ɵɵFactoryDeclaration,
+  ɵɵControlFeature,
   ɵɵHostDirectivesFeature,
   ɵɵInheritDefinitionFeature,
   ɵɵInjectorDeclaration,
diff --git a/packages/core/src/render3/instructions/control.ts b/packages/core/src/render3/instructions/control.ts
index c1a2268a03d..4c2e80825f2 100644
--- a/packages/core/src/render3/instructions/control.ts
+++ b/packages/core/src/render3/instructions/control.ts
@@ -5,40 +5,23 @@
  * 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 {RuntimeError, RuntimeErrorCode} from '../../errors';
 import {performanceMarkFeature} from '../../util/performance';
-import {getClosureSafeProperty} from '../../util/property';
 import {assertFirstCreatePass} from '../assert';
-import {bindingUpdated} from '../bindings';
-import {
-  ɵCONTROL,
-  ɵFieldState,
-  ɵFormFieldDirective,
-  type ɵFormFieldBindingOptions,
-} from '../interfaces/control';
-import {DirectiveDef} from '../interfaces/definition';
-import {TElementNode, TNode, TNodeFlags, TNodeType} from '../interfaces/node';
-import {Renderer} from '../interfaces/renderer';
-import {SanitizerFn} from '../interfaces/sanitization';
+import type {ControlDirectiveHost} from '../interfaces/control';
+import type {DirectiveDef} from '../interfaces/definition';
+import {type TNode, TNodeFlags} from '../interfaces/node';
 import {isComponentHost} from '../interfaces/type_checks';
-import {LView, RENDERER, TView} from '../interfaces/view';
-import {Signal} from '../reactivity/api';
-import {untracked} from '../reactivity/untracked';
+import {type LView, RENDERER, type TView} from '../interfaces/view';
 import {
-  getBindingIndex,
   getCurrentTNode,
   getLView,
   getSelectedTNode,
   getTView,
-  nextBindingIndex,
+  isInCheckNoChangesMode,
 } from '../state';
-import {NO_CHANGE} from '../tokens';
-import {isNameOnlyAttributeMarker} from '../util/attrs_utils';
 import {debugStringifyTypeForError} from '../util/stringify_utils';
-import {getNativeByTNode, storeCleanupWithContext} from '../util/view_utils';
 import {listenToOutput} from '../view/directive_outputs';
 import {listenToDomEvent, wrapListener} from '../view/listeners';
-import {setPropertyAndInputs, storePropertyBindingMetadata} from './shared';
 import {writeToDirectiveInput} from './write_to_directive_input';
 
 /**
@@ -51,7 +34,11 @@ import {writeToDirectiveInput} from './write_to_directive_input';
  * @codeGenApi
  */
 export function ɵɵcontrolCreate(): void {
-  const lView = getLView<{} | null>();
+  controlCreateInternal();
+}
+
+export function controlCreateInternal(): void {
+  const lView = getLView();
   const tView = getTView();
   const tNode = getCurrentTNode()!;
 
@@ -59,175 +46,174 @@ export function ɵɵcontrolCreate(): void {
     initializeControlFirstCreatePass(tView, tNode, lView);
   }
 
-  const fieldDirective = getFieldDirective(tNode, lView);
-  if (!fieldDirective) {
+  if (tNode.controlDirectiveIndex === -1) {
     return;
   }
-
   performanceMarkFeature('NgSignalForms');
 
-  if (tNode.flags & TNodeFlags.isFormValueControl) {
-    initializeCustomControl(lView, tNode, fieldDirective, 'value');
-  } else if (tNode.flags & TNodeFlags.isFormCheckboxControl) {
-    initializeCustomControl(lView, tNode, fieldDirective, 'checked');
-  } else if (tNode.flags & TNodeFlags.isInteropControl) {
-    initializeInteropControl(fieldDirective);
-  } else if (tNode.flags & TNodeFlags.isNativeControl) {
-    initializeNativeControl(lView, tNode, fieldDirective);
-  }
-
-  fieldDirective.registerAsBinding(getCustomControl(tNode, lView));
+  const instance = lView[tNode.controlDirectiveIndex];
+  const controlDef = (tView.data[tNode.controlDirectiveIndex] as DirectiveDef<unknown>).controlDef!;
+  controlDef.create(instance, new ControlDirectiveHostImpl(lView, tView, tNode));
 }
 
 /**
- * Updates a `field` property, and possibly other form control properties, on the current element.
- *
- * This is a specialized version of the `ɵɵproperty` instruction that handles updating additional
- * form control properties, if set up to do so by {@link ɵɵcontrolCreate} during creation.
- *
- * @param value New value to write.
- * @param sanitizer An optional function used to sanitize the value.
+ * Calls the update function of the control directive at the given index.
  *
  * @codeGenApi
  */
-export function ɵɵcontrol<T>(value: T, name: string, sanitizer?: SanitizerFn | null): void {
-  const lView = getLView();
-  const tNode = getSelectedTNode();
-  const bindingIndex = nextBindingIndex();
+export function ɵɵcontrol(): void {
+  controlUpdateInternal();
+}
 
-  if (bindingUpdated(lView, bindingIndex, value)) {
-    const tView = getTView();
-    setPropertyAndInputs(tNode, lView, name, value, lView[RENDERER], sanitizer);
-    ngDevMode && storePropertyBindingMetadata(tView.data, tNode, name, bindingIndex);
+export function controlUpdateInternal(): void {
+  if (ngDevMode && isInCheckNoChangesMode()) {
+    return;
   }
 
-  updateControl(lView, tNode);
-}
-
-/**
- * Calls {@link updateControl} with the current `LView` and selected `TNode`.
- *
- * NOTE: This instruction exists solely to accommodate tree-shakeable, dynamic control bindings.
- * It's intended to be referenced exclusively by the Signal Forms `FormField` directive and should not
- * be referenced by any other means.
- */
-export function ɵcontrolUpdate(): void {
   const lView = getLView();
+  const tView = getTView();
   const tNode = getSelectedTNode();
-  updateControl(lView, tNode);
+
+  if (tNode.controlDirectiveIndex === -1) {
+    return;
+  }
+
+  const controlDef = (tView.data[tNode.controlDirectiveIndex] as DirectiveDef<unknown>).controlDef!;
+  const instance = lView[tNode.controlDirectiveIndex];
+  controlDef.update(instance, new ControlDirectiveHostImpl(lView, tView, tNode));
 }
 
-/**
- * Updates the form control properties of a `field` bound form control.
- *
- * Does nothing if the current node is not a `field` bound form control.
- *
- * @param lView The `LView` that contains the control.
- * @param tNode The `TNode` of the control.
- */
-function updateControl<T>(lView: LView, tNode: TNode): void {
-  const fieldDirective = getFieldDirective(tNode, lView);
-  if (fieldDirective) {
-    updateControlClasses(lView, tNode, fieldDirective);
+class ControlDirectiveHostImpl implements ControlDirectiveHost {
+  private readonly lView: LView;
+  private readonly tView: TView;
+  private readonly tNode: TNode;
 
-    if (tNode.flags & TNodeFlags.isFormValueControl) {
-      updateCustomControl(tNode, lView, fieldDirective, 'value');
-    } else if (tNode.flags & TNodeFlags.isFormCheckboxControl) {
-      updateCustomControl(tNode, lView, fieldDirective, 'checked');
-    } else if (tNode.flags & TNodeFlags.isInteropControl) {
-      updateInteropControl(tNode, lView, fieldDirective);
-    } else {
-      updateNativeControl(tNode, lView, fieldDirective);
+  readonly hasPassThrough: boolean;
+
+  constructor(lView: LView, tView: TView, tNode: TNode) {
+    this.lView = lView;
+    this.tView = tView;
+    this.tNode = tNode;
+    this.hasPassThrough = !!(tNode.flags & TNodeFlags.isPassThroughControl);
+  }
+
+  get customControl(): unknown {
+    return this.tNode.customControlIndex !== -1
+      ? this.lView[this.tNode.customControlIndex]
+      : undefined;
+  }
+
+  get descriptor(): string {
+    if (ngDevMode && isComponentHost(this.tNode)) {
+      const componentIndex = this.tNode.directiveStart + this.tNode.componentOffset;
+      const componentDef = this.tView.data[componentIndex] as DirectiveDef<unknown>;
+      return `Component ${debugStringifyTypeForError(componentDef.type)}`;
+    }
+    return `<${this.tNode.value}>`;
+  }
+
+  listenToCustomControlOutput(outputName: string, callback: (event: Event) => void): void {
+    if (
+      !hasOutput(
+        this.tView.data[this.tNode.customControlIndex] as DirectiveDef<unknown>,
+        outputName,
+      )
+    ) {
+      return;
+    }
+
+    listenToOutput(
+      this.tNode,
+      this.lView,
+      this.tNode.customControlIndex,
+      outputName,
+      outputName,
+      wrapListener(this.tNode, this.lView, callback),
+    );
+  }
+
+  listenToCustomControlModel(listener: (value: unknown) => void): void {
+    const modelName =
+      this.tNode.flags & TNodeFlags.isFormValueControl ? 'valueChange' : 'checkedChange';
+    listenToOutput(
+      this.tNode,
+      this.lView,
+      this.tNode.customControlIndex,
+      modelName,
+      modelName,
+      wrapListener(this.tNode, this.lView, listener),
+    );
+  }
+
+  listenToDom(eventName: string, listener: (event: Event) => void): void {
+    listenToDomEvent(
+      this.tNode,
+      this.tView,
+      this.lView as LView<{} | null>,
+      undefined,
+      this.lView[RENDERER],
+      eventName,
+      listener,
+      wrapListener(this.tNode, this.lView, listener),
+    );
+  }
+
+  setInputOnDirectives(inputName: string, value: unknown): boolean {
+    const directiveIndices = this.tNode.inputs?.[inputName];
+    if (!directiveIndices) {
+      return false;
+    }
+    for (const index of directiveIndices) {
+      const directiveDef = this.tView.data[index] as DirectiveDef<unknown>;
+      const directive = this.lView[index];
+      writeToDirectiveInput(directiveDef, directive, inputName, value);
+    }
+    return true;
+  }
+
+  setCustomControlModelInput(value: unknown): void {
+    const directive = this.lView[this.tNode.customControlIndex];
+    const directiveDef = this.tView.data[this.tNode.customControlIndex] as DirectiveDef<{}>;
+    const modelName = this.tNode.flags & TNodeFlags.isFormValueControl ? 'value' : 'checked';
+    writeToDirectiveInput(directiveDef, directive, modelName, value);
+  }
+
+  customControlHasInput(inputName: string): boolean {
+    if (this.tNode.customControlIndex === -1) {
+      return false;
+    }
+    const directiveDef = this.tView.data[this.tNode.customControlIndex] as DirectiveDef<unknown>;
+    return directiveDef.inputs[inputName] != undefined;
+  }
+}
+
+function initializeControlFirstCreatePass(tView: TView, tNode: TNode, lView: LView): void {
+  ngDevMode && assertFirstCreatePass(tView);
+
+  for (let i = tNode.directiveStart; i < tNode.directiveEnd; i++) {
+    const directiveDef = tView.data[i] as DirectiveDef<unknown>;
+    if (directiveDef.controlDef) {
+      tNode.controlDirectiveIndex = i;
+      break;
     }
   }
 
-  // This instruction requires an additional variable slot to store control property bindings, but
-  // may not use them if the `control` is undefined, so we increment the index here rather than when
-  // used to ensure it happens unconditionally. Otherwise, the next instruction could begin with the
-  // wrong binding index.
-  nextBindingIndex();
-}
-
-function initializeControlFirstCreatePass<T>(tView: TView, tNode: TNode, lView: LView): void {
-  ngDevMode && assertFirstCreatePass(tView);
-
-  const directiveIndices = tNode.inputs?.['formField'];
-  if (!directiveIndices) {
-    return; // There are no matching inputs for the `[formField]` property binding.
-  }
-
-  // If component has a `formField` input, we assume that it will handle binding the field to the
-  // appropriate native/custom control in its template, so we do not attempt to bind any inputs
-  // on this component.
-  if (
-    isComponentHost(tNode) &&
-    directiveIndices.includes(tNode.directiveStart + tNode.componentOffset)
-  ) {
+  if (tNode.controlDirectiveIndex === -1) {
+    // No control directive found on this element.
     return;
   }
 
-  // Check if the `FormField` directive is present.
-  const controlIndex = directiveIndices.find((index) => ɵCONTROL in lView[index]);
-  if (controlIndex === undefined) {
-    return;
+  const controlDef = (tView.data[tNode.controlDirectiveIndex] as DirectiveDef<unknown>).controlDef!;
+  if (controlDef.passThroughInput) {
+    // This control directive has a `passThroughInput` property binding.
+    if ((tNode.inputs?.[controlDef.passThroughInput]?.length ?? 0) > 1) {
+      // Another directive has bound `controlDef.passThroughInput`.
+      tNode.flags |= TNodeFlags.isPassThroughControl;
+      return;
+    }
   }
 
-  // Cache the index of the `FormField` directive.
-  tNode.fieldIndex = controlIndex;
-
-  // First check if the `FormField` directive is bound to an interop control (e.g. a Reactive Forms
-  // control using `ControlValueAccessor`). If not, look for a custom control.
-  const foundControl =
-    isInteropControlFirstCreatePass(tNode, lView) || isCustomControlFirstCreatePass(tView, tNode);
-
-  // We check for a native control, even if we found a custom or interop one, to determine whether
-  // we can set native properties as a fallback on the custom or interop control.
-  if (isNativeControlFirstCreatePass(tNode) || foundControl) {
-    return;
-  }
-
-  throw new RuntimeError(
-    RuntimeErrorCode.INVALID_FIELD_DIRECTIVE_HOST,
-    ngDevMode &&
-      `${describeElement(tView, tNode)} is an invalid [formField] directive host. The host must be a native form control ` +
-        `(such as <input>', '<select>', or '<textarea>') or a custom form control with a 'value' or ` +
-        `'checked' model.`,
-  );
-}
-
-/**
- * Returns a string description of element that the `TNode` represents.
- *
- * @param tView The `TView` of the current view.
- * @param tNode The `TNode` to describe.
- * @returns A string description of the element.
- */
-function describeElement(tView: TView, tNode: TNode): string {
-  if (ngDevMode && isComponentHost(tNode)) {
-    const componentIndex = tNode.directiveStart + tNode.componentOffset;
-    const componentDef = tView.data[componentIndex] as DirectiveDef<unknown>;
-    return `Component ${debugStringifyTypeForError(componentDef.type)}`;
-  }
-  return `<${tNode.value}>`;
-}
-
-/**
- * Determines whether an interop control (with a `value` or `checked` model input) is present
- * on the current `TNode` during the first creation pass.
- *
- * If an interop control is found, the function sets the appropriate `TNodeFlags`.
- *
- * @param tNode The `TNode` to inspect for an interop control.
- * @param lView The `LView` of the current view.
- * @returns `true` if an interop control is found, `false` otherwise.
- */
-function isInteropControlFirstCreatePass(tNode: TNode, lView: LView): boolean {
-  const control = lView[tNode.fieldIndex] as ɵFormFieldDirective<unknown>;
-  if (control.ɵinteropControl) {
-    tNode.flags |= TNodeFlags.isInteropControl;
-    return true;
-  }
-  return false;
+  initializeCustomControlStatus(tView, tNode);
 }
 
 /**
@@ -241,64 +227,20 @@ function isInteropControlFirstCreatePass(tNode: TNode, lView: LView): boolean {
  * @param tNode The `TNode` to inspect for a custom control.
  * @returns `true` if a custom control is found, `false` otherwise.
  */
-function isCustomControlFirstCreatePass(tView: TView, tNode: TNode): boolean {
+function initializeCustomControlStatus(tView: TView, tNode: TNode): void {
   for (let i = tNode.directiveStart; i < tNode.directiveEnd; i++) {
     const directiveDef = tView.data[i] as DirectiveDef<unknown>;
     if (hasModelInput(directiveDef, 'value')) {
       tNode.flags |= TNodeFlags.isFormValueControl;
       tNode.customControlIndex = i;
-      return true;
+      return;
     }
     if (hasModelInput(directiveDef, 'checked')) {
       tNode.flags |= TNodeFlags.isFormCheckboxControl;
       tNode.customControlIndex = i;
-      return true;
+      return;
     }
   }
-  return false;
-}
-
-/**
- * Determines whether the current `TNode` represents a native form control (e.g., `<input>`,
- * `<select>`, `<textarea>`) during the first creation pass.
- *
- * If a native control is found, the function sets the appropriate `TNodeFlags` to indicate
- * its type (e.g., numeric, text).
- *
- * @param tNode The `TNode` to inspect for a native control.
- * @returns `true` if the `TNode` is a native control, `false` otherwise.
- */
-function isNativeControlFirstCreatePass(tNode: TNode): boolean {
-  if (!isNativeControl(tNode)) {
-    return false;
-  }
-  tNode.flags |= TNodeFlags.isNativeControl;
-  if (isNumericInput(tNode)) {
-    tNode.flags |= TNodeFlags.isNativeNumericControl;
-  }
-  if (isTextControl(tNode)) {
-    tNode.flags |= TNodeFlags.isNativeTextControl;
-  }
-  return true;
-}
-
-/**
- * Returns the {@link ɵFormFieldDirective} on the specified node, if one is present and a `field`
- * input is bound to it, but not to a component. If a `field` input is bound to a component, we
- * assume the component will manage the control in its own template and return nothing to indicate
- * that the directive should not be set up.
- *
- * @param tNode The `TNode` of the element to check.
- * @param lView The `LView` that contains the element.
- */
-function getFieldDirective<T>(tNode: TNode, lView: LView): ɵFormFieldDirective<T> | undefined {
-  const index = tNode.fieldIndex;
-  return index === -1 ? undefined : lView[index];
-}
-
-function getCustomControl(tNode: TNode, lView: LView): ɵFormFieldBindingOptions | undefined {
-  const index = tNode.customControlIndex;
-  return index === -1 ? undefined : lView[index];
 }
 
 /**
@@ -320,806 +262,3 @@ function hasInput(directiveDef: DirectiveDef<unknown>, name: string): boolean {
 function hasOutput(directiveDef: DirectiveDef<unknown>, name: string): boolean {
   return name in directiveDef.outputs;
 }
-
-/**
- * Initializes a custom form control component, setting up focus logic and event listeners to notify
- * the `field` of changes.
- *
- * @param lView The `LView` that contains the custom form control.
- * @param tNode The `TNode` of the custom form control.
- * @param fieldDirective The `ɵFormFieldDirective` instance.
- * @param componentIndex The index of the custom form control component in the `LView`.
- * @param modelName The name of the model property on the custom form control.
- */
-function initializeCustomControl(
-  lView: LView<{} | null>,
-  tNode: TNode,
-  fieldDirective: ɵFormFieldDirective<unknown>,
-  modelName: string,
-) {
-  const tView = getTView();
-  const directiveIndex = tNode.customControlIndex;
-  const outputName = modelName + 'Change';
-  listenToOutput(
-    tNode,
-    lView,
-    directiveIndex,
-    outputName,
-    outputName,
-    wrapListener(tNode, lView, (value: unknown) => fieldDirective.state().setControlValue(value)),
-  );
-
-  const directiveDef = tView.data[directiveIndex] as DirectiveDef<unknown>;
-  const touchedOutputName = 'touchedChange';
-  if (hasOutput(directiveDef, touchedOutputName)) {
-    listenToOutput(
-      tNode,
-      lView,
-      directiveIndex,
-      touchedOutputName,
-      touchedOutputName,
-      wrapListener(tNode, lView, () => fieldDirective.state().markAsTouched()),
-    );
-  }
-}
-
-/**
- * Initializes an interoperable form control, setting up focus logic and event listeners to notify
- * the `field` of changes.
- *
- * @param fieldDirective The `ɵFormFieldDirective` instance.
- */
-function initializeInteropControl(fieldDirective: ɵFormFieldDirective<unknown>): void {
-  const interopControl = fieldDirective.ɵinteropControl!;
-  interopControl.registerOnChange((value: unknown) =>
-    fieldDirective.state().setControlValue(value),
-  );
-  interopControl.registerOnTouched(() => fieldDirective.state().markAsTouched());
-}
-
-/**
- * A type for {@link HTMLTextAreaElement} that can be narrowed by its `type` property.
- *
- * The `type` property of a {@link HTMLTextAreaElement} should always be 'textarea', but the
- * TypeScript DOM API type definition lacks this detail.
- *
- * https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement/type
- */
-interface HTMLTextAreaElementNarrowed extends HTMLTextAreaElement {
-  readonly type: 'textarea';
-}
-
-/**
- * Supported native control element types.
- */
-type NativeControlElement = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElementNarrowed;
-
-function isNativeControl(tNode: TNode): tNode is TElementNode {
-  if (tNode.type !== TNodeType.Element) {
-    return false;
-  }
-  const tagName = tNode.value;
-  return tagName === 'input' || tagName === 'textarea' || tagName === 'select';
-}
-
-/**
- * Initializes a native form control element, setting up focus logic and event listeners to notify
- * the `field` of changes.
- *
- * @param lView The `LView` that contains the native form control.
- * @param tNode The `TNode` of the native form control.
- * @param fieldDirective The `ɵFormFieldDirective` instance.
- */
-function initializeNativeControl(
-  lView: LView<{} | null>,
-  tNode: TNode,
-  fieldDirective: ɵFormFieldDirective<unknown>,
-) {
-  const tView = getTView();
-  const renderer = lView[RENDERER];
-  const element = getNativeByTNode(tNode, lView) as NativeControlElement;
-
-  const inputListener = () => {
-    const state = fieldDirective.state();
-    state.setControlValue(getNativeControlValue(element, state.value));
-  };
-  listenToDomEvent(
-    tNode,
-    tView,
-    lView,
-    undefined,
-    renderer,
-    'input',
-    inputListener,
-    wrapListener(tNode, lView, inputListener),
-  );
-
-  const blurListener = () => {
-    fieldDirective.state().markAsTouched();
-  };
-  listenToDomEvent(
-    tNode,
-    tView,
-    lView,
-    undefined,
-    renderer,
-    'blur',
-    blurListener,
-    wrapListener(tNode, lView, blurListener),
-  );
-
-  // The native `<select>` tracks its `value` by keeping track of the selected `<option>`.
-  // Therefore if we set the value to an arbitrary string *before* the corresponding option has been
-  // created, the `<select>` will ignore it.
-  //
-  // This means that we need to know when an `<option>` is created, destroyed, or has its `value`
-  // changed so that we can re-sync the `<select>` to the field state's value. We implement this
-  // using a `MutationObserver` that we create to observe `<option>` changes.
-  if (
-    tNode.type === TNodeType.Element &&
-    tNode.value === 'select' &&
-    typeof MutationObserver === 'function'
-  ) {
-    const observer = observeSelectMutations(
-      element as HTMLSelectElement,
-      fieldDirective as ɵFormFieldDirective<string>,
-    );
-
-    storeCleanupWithContext(tView, lView, observer, observer.disconnect);
-  }
-}
-
-/**
- * Creates a `MutationObserver` to observe changes to the available `<option>`s for this select.
- *
- * @param select The native `<select>` element to observe.
- * @param lView The `LView` that contains the native form control.
- * @param tNode The `TNode` of the native form control.
- * @returns The newly created `MutationObserver`.
- */
-function observeSelectMutations(
-  select: HTMLSelectElement,
-  controlDirective: ɵFormFieldDirective<string>,
-): MutationObserver {
-  const observer = new MutationObserver((mutations) => {
-    if (mutations.some((m) => isRelevantSelectMutation(m))) {
-      select.value = controlDirective.state().value();
-    }
-  });
-  observer.observe(select, {
-    attributes: true,
-    attributeFilter: ['value'],
-    // We watch the character data, because an `<option>` with no explicit `value` property set uses
-    // its text content as its value.
-    // (See https://developer.mozilla.org/en-US/docs/Web/API/HTMLOptionElement/value)
-    characterData: true,
-    childList: true,
-    subtree: true,
-  });
-  return observer;
-}
-
-/**
- * Checks if a given mutation record is relevant for resyncing a <select>.
- * In general its relevant if:
- * - Non comment content of the select changed
- * - The value attribute of an option changed.
- */
-function isRelevantSelectMutation(mutation: MutationRecord) {
-  // Consider changes that may add / remove options, or change their text content.
-  if (mutation.type === 'childList' || mutation.type === 'characterData') {
-    // If the target element is a comment its not relevant.
-    if (mutation.target instanceof Comment) {
-      return false;
-    }
-    // Otherwise if any non-comment nodes were added / removed it is relevant.
-    for (const node of mutation.addedNodes) {
-      if (!(node instanceof Comment)) {
-        return true;
-      }
-    }
-    for (const node of mutation.removedNodes) {
-      if (!(node instanceof Comment)) {
-        return true;
-      }
-    }
-    // Otherwise its not relevant.
-    return false;
-  }
-  // If the value attribute of an option changed, its relevant.
-  if (mutation.type === 'attributes' && mutation.target instanceof HTMLOptionElement) {
-    return true;
-  }
-  // Everything else is not relevant.
-  return false;
-}
-
-/**
- * Updates the configured classes for the control.
- *
- * @param lView The `LView` that contains the control.
- * @param tNode The `TNode` of the control.
- * @param control The `ɵFormFieldDirective` instance.
- */
-function updateControlClasses(lView: LView, tNode: TNode, control: ɵFormFieldDirective<unknown>) {
-  if (control.classes) {
-    const bindings = getControlBindings(lView);
-    bindings.classes ??= {};
-    const state = control.state();
-    const renderer = lView[RENDERER];
-    const element = getNativeByTNode(tNode, lView) as HTMLElement;
-
-    for (const [className, enabled] of control.classes) {
-      const isEnabled = enabled();
-      if (controlClassBindingUpdated(bindings.classes, className, isEnabled)) {
-        if (isEnabled) {
-          renderer.addClass(element, className);
-        } else {
-          renderer.removeClass(element, className);
-        }
-      }
-    }
-  }
-}
-
-/**
- * Updates the inputs of a custom form control component with the latest state from the `field`.
- *
- * @param lView The `LView` that contains the custom form control.
- * @param componentIndex The index of the custom form control component in the `LView`.
- * @param modelName The name of the model property on the custom form control.
- * @param fieldDirective The `ɵFormFieldDirective` instance.
- */
-function updateCustomControl(
-  tNode: TNode,
-  lView: LView,
-  fieldDirective: ɵFormFieldDirective<unknown>,
-  modelName: string,
-) {
-  const tView = getTView();
-  const directiveIndex = tNode.customControlIndex;
-  const directive = lView[directiveIndex];
-  const directiveDef = tView.data[directiveIndex] as DirectiveDef<{}>;
-  const state = fieldDirective.state();
-  const bindings = getControlBindings(lView);
-
-  // Bind custom form control model ('value' or 'checked').
-  const controlValue = state.controlValue();
-  if (controlBindingUpdated(bindings, CONTROL_VALUE, controlValue)) {
-    writeToDirectiveInput(directiveDef, directive, modelName, controlValue);
-  }
-
-  const isNative = (tNode.flags & TNodeFlags.isNativeControl) !== 0;
-  const element = isNative ? (getNativeByTNode(tNode, lView) as NativeControlElement) : null;
-  const renderer = lView[RENDERER];
-
-  // Bind remaining field state properties.
-  for (const key of CONTROL_BINDING_KEYS) {
-    const inputName = CONTROL_BINDING_NAMES[key];
-    const value = getValue(fieldDirective, state, key, inputName);
-    if (controlBindingUpdated(bindings, key, value)) {
-      updateDirectiveInputs(tNode, lView, inputName, value);
-
-      // If the host node is a native control, we can bind field state properties to native
-      // properties for any that weren't defined as inputs on the custom control.
-      if (isNative && !(inputName in directiveDef.inputs)) {
-        updateNativeProperty(tNode, renderer, element!, key, value, inputName);
-      }
-    }
-  }
-}
-
-/**
- * Updates the properties of an interop form control with the latest state from the `field`.
- *
- * @param tNode The `TNode` of the form control.
- * @param lView The `LView` that contains the native form control.
- * @param fieldDirective The `ɵFormFieldDirective` instance.
- */
-function updateInteropControl(
-  tNode: TNode,
-  lView: LView,
-  fieldDirective: ɵFormFieldDirective<unknown>,
-): void {
-  const interopControl = fieldDirective.ɵinteropControl!;
-  const bindings = getControlBindings(lView);
-  const state = fieldDirective.state();
-
-  const isNative = (tNode.flags & TNodeFlags.isNativeControl) !== 0;
-  const element = isNative ? (getNativeByTNode(tNode, lView) as NativeControlElement) : null;
-  const renderer = lView[RENDERER];
-
-  const value = state.value();
-  if (controlBindingUpdated(bindings, CONTROL_VALUE, value)) {
-    // We don't know if the interop control has underlying signals, so we must use `untracked` to
-    // prevent writing to a signal in a reactive context.
-    untracked(() => interopControl.writeValue(value));
-  }
-
-  for (const key of CONTROL_BINDING_KEYS) {
-    const inputName = CONTROL_BINDING_NAMES[key];
-    const value = getValue(fieldDirective, state, key, inputName);
-    if (controlBindingUpdated(bindings, key, value)) {
-      const didUpdateInput = updateDirectiveInputs(tNode, lView, inputName, value);
-
-      // We never fallback to the native property for `disabled` since it's handled directly by
-      // `ControlValueAccessor`.
-      if (key === DISABLED) {
-        if (interopControl.setDisabledState) {
-          untracked(() => interopControl.setDisabledState!(value as boolean));
-        }
-      } else if (isNative && !didUpdateInput) {
-        // If the host node is a native control, we can bind field state properties to native
-        // properties for any that aren't managed by `ControlValueAccessor`.
-        updateNativeProperty(tNode, renderer, element!, key, value, inputName);
-      }
-    }
-  }
-}
-
-/**
- * Updates the properties of a native form control element with the latest state from the `field`.
- *
- * @param tNode The `TNode` of the native form control.
- * @param lView The `LView` that contains the native form control.
- * @param fieldDirective The `ɵFormFieldDirective` instance.
- */
-function updateNativeControl(
-  tNode: TNode,
-  lView: LView,
-  fieldDirective: ɵFormFieldDirective<unknown>,
-): void {
-  const element = getNativeByTNode(tNode, lView) as NativeControlElement;
-  const renderer = lView[RENDERER];
-  const state = fieldDirective.state();
-  const bindings = getControlBindings(lView);
-
-  const controlValue = state.controlValue();
-  if (controlBindingUpdated(bindings, CONTROL_VALUE, controlValue)) {
-    setNativeControlValue(element, controlValue);
-  }
-
-  for (const key of CONTROL_BINDING_KEYS) {
-    const inputName = CONTROL_BINDING_NAMES[key];
-    const value = getValue(fieldDirective, state, key, inputName);
-    if (controlBindingUpdated(bindings, key, value)) {
-      updateNativeProperty(tNode, renderer, element, key, value, inputName);
-      updateDirectiveInputs(tNode, lView, inputName, value);
-    }
-  }
-}
-
-/**
- * Gets the value of the given field state key to bind to the form UI control associated with the
- * given form field directive. In most cases this value is obtained by reading it off the field state.
- * However, in the case of the `errors` property, we only want to report parse errors that are
- * relevant for this particular UI control, so we read from the directive instead, which contains
- * only the filtered errors that pertain to this binding.
- */
-function getValue(
-  fieldDirective: ɵFormFieldDirective<unknown>,
-  state: ɵFieldState<unknown>,
-  fieldStateKey: ControlBindingKeys,
-  inputName: ControlBindingKeys,
-): unknown {
-  if (inputName === 'errors') {
-    return fieldDirective[fieldStateKey as 'errors']();
-  }
-  return state[fieldStateKey]?.();
-}
-
-/**
- * Updates all directive inputs with the given name on the given node.
- *
- * @param tNode The node on which the directives are hosted.
- * @param lView The current LView.
- * @param inputName The public name of the input to update.
- * @param value The value to write to the input.
- */
-function updateDirectiveInputs(
-  tNode: TNode,
-  lView: LView,
-  inputName: string,
-  value: unknown,
-): boolean {
-  const directiveIndices = tNode.inputs?.[inputName];
-  if (directiveIndices) {
-    const tView = getTView();
-    for (const index of directiveIndices) {
-      const directiveDef = tView.data[index] as DirectiveDef<unknown>;
-      const directive = lView[index];
-      writeToDirectiveInput(directiveDef, directive, inputName, value);
-    }
-    return true;
-  }
-  return false;
-}
-
-/**
- * Updates the native DOM property on the given node.
- *
- * @param tNode The node corresponding to the native control.
- * @param renderer The renderer to use for DOM updates.
- * @param element The native control element.
- * @param key The control binding key (identifies the property type, e.g. disabled, required).
- * @param value The new value for the property.
- * @param name The DOM attribute/property name.
- */
-function updateNativeProperty(
-  tNode: TNode,
-  renderer: Renderer,
-  element: NativeControlElement,
-  key: ControlBindingKeys,
-  value: any,
-  name: string,
-) {
-  switch (key) {
-    case NAME:
-      renderer.setAttribute(element, name, value);
-      break;
-    case DISABLED:
-    case READONLY:
-    case REQUIRED:
-      setBooleanAttribute(renderer, element, name, value);
-      break;
-    case MAX:
-    case MIN:
-      if (tNode.flags & TNodeFlags.isNativeNumericControl) {
-        setOptionalAttribute(renderer, element, name, value);
-      }
-      break;
-    case MAX_LENGTH:
-    case MIN_LENGTH:
-      if (tNode.flags & TNodeFlags.isNativeTextControl) {
-        setOptionalAttribute(renderer, element, name, value);
-      }
-      break;
-  }
-}
-
-/** Checks if a given value is a Date or null */
-function isDateOrNull(value: unknown): value is Date | null {
-  return value === null || value instanceof Date;
-}
-
-/** Returns whether `control` has a numeric input type. */
-function isNumericInput(tNode: TElementNode): boolean {
-  if (!tNode.attrs || tNode.value !== 'input') {
-    return false;
-  }
-
-  for (let i = 0; i < tNode.attrs.length; i += 2) {
-    const name = tNode.attrs[i];
-
-    if (isNameOnlyAttributeMarker(name)) {
-      break;
-    }
-
-    if (name === 'type') {
-      const value = tNode.attrs[i + 1];
-
-      return (
-        value === 'date' ||
-        value === 'datetime-local' ||
-        value === 'month' ||
-        value === 'number' ||
-        value === 'range' ||
-        value === 'time' ||
-        value === 'week'
-      );
-    }
-  }
-
-  return false;
-}
-
-/**
- * Returns whether `tNode` represents a text-based input.
- *
- * This is not the same as an input with `type="text"`, but rather any input that accepts
- * text-based input which includes numeric types.
- */
-function isTextControl(tNode: TElementNode): boolean {
-  return tNode.value !== 'select';
-}
-
-/**
- * Returns the value from a native control element.
- *
- * @param element The native control element.
- * @param currentValue A function that returns the current value from the control's corresponding
- *   field state.
- *
- * The type of the returned value depends on the `type` property of the control, and will attempt to
- * match the current value's type. For example, the value of `<input type="number">` can be read as
- * a `string` or a `number`. If the current value is a `number`, then this will return a `number`.
- * Otherwise, this will return the value as a `string`.
- */
-function getNativeControlValue(
-  element: NativeControlElement,
-  currentValue: () => unknown,
-): unknown {
-  // Special cases for specific input types.
-  switch (element.type) {
-    case 'checkbox':
-      return element.checked;
-    case 'number':
-    case 'range':
-    case 'datetime-local':
-      // We can read a `number` or a `string` from this input type. Prefer whichever is consistent
-      // with the current type.
-      if (typeof currentValue() === 'number') {
-        return element.valueAsNumber;
-      }
-      break;
-    case 'date':
-    case 'month':
-    case 'time':
-    case 'week':
-      // We can read a `Date | null`, `number`, or `string` from this input type. Prefer whichever
-      // is consistent with the current type.
-      const value = currentValue();
-      if (isDateOrNull(value)) {
-        return element.valueAsDate;
-      } else if (typeof value === 'number') {
-        return element.valueAsNumber;
-      }
-      break;
-  }
-
-  // Default to reading the value as a string.
-  return element.value;
-}
-
-/**
- * Sets a native control element's value.
- *
- * @param element The native control element.
- * @param value The new value to set.
- */
-function setNativeControlValue(element: NativeControlElement, value: unknown) {
-  // Special cases for specific input types.
-  switch (element.type) {
-    case 'checkbox':
-      element.checked = value as boolean;
-      return;
-    case 'radio':
-      // Although HTML behavior is to clear the input already, we do this just in case. It seems
-      // like it might be necessary in certain environments (e.g. Domino).
-      element.checked = value === element.value;
-      return;
-    case 'number':
-    case 'range':
-    case 'datetime-local':
-      // This input type can receive a `number` or a `string`.
-      if (typeof value === 'number') {
-        setNativeNumberControlValue(element, value);
-        return;
-      }
-      break;
-    case 'date':
-    case 'month':
-    case 'time':
-    case 'week':
-      // This input type can receive a `Date | null` or a `number` or a `string`.
-      if (isDateOrNull(value)) {
-        element.valueAsDate = value;
-        return;
-      } else if (typeof value === 'number') {
-        setNativeNumberControlValue(element, value);
-        return;
-      }
-  }
-
-  // Default to setting the value as a string.
-  element.value = value as string;
-}
-
-/** Writes a value to a native <input type="number">. */
-function setNativeNumberControlValue(element: HTMLInputElement, value: number) {
-  // Writing `NaN` causes a warning in the console, so we instead write `''`.
-  // This allows the user to safely use `NaN` as a number value that means "clear the input".
-  if (isNaN(value)) {
-    element.value = '';
-  } else {
-    element.valueAsNumber = value;
-  }
-}
-
-/** A property-renaming safe reference to a property named 'disabled'. */
-const DISABLED = /* @__PURE__ */ getClosureSafeProperty({
-  disabled: getClosureSafeProperty,
-}) as 'disabled';
-
-/** A property-renaming safe reference to a property named 'max'. */
-const MAX = /* @__PURE__ */ getClosureSafeProperty({max: getClosureSafeProperty}) as 'max';
-
-/** A property-renaming safe reference to a property named 'maxLength'. */
-const MAX_LENGTH = /* @__PURE__ */ getClosureSafeProperty({
-  maxLength: getClosureSafeProperty,
-}) as 'maxLength';
-
-/** A property-renaming safe reference to a property named 'min'. */
-const MIN = /* @__PURE__ */ getClosureSafeProperty({min: getClosureSafeProperty}) as 'min';
-
-/** A property-renaming safe reference to a property named 'minLength'. */
-const MIN_LENGTH = /* @__PURE__ */ getClosureSafeProperty({
-  minLength: getClosureSafeProperty,
-}) as 'minLength';
-
-/** A property-renaming safe reference to a property named 'name'. */
-const NAME = /* @__PURE__ */ getClosureSafeProperty({name: getClosureSafeProperty}) as 'name';
-
-/** A property-renaming safe reference to a property named 'readonly'. */
-const READONLY = /* @__PURE__ */ getClosureSafeProperty({
-  readonly: getClosureSafeProperty,
-}) as 'readonly';
-
-/** A property-renaming safe reference to a property named 'required'. */
-const REQUIRED = /* @__PURE__ */ getClosureSafeProperty({
-  required: getClosureSafeProperty,
-}) as 'required';
-
-/** A property-renaming safe reference to a property named 'controlValue'. */
-const CONTROL_VALUE = /* @__PURE__ */ getClosureSafeProperty({
-  controlValue: getClosureSafeProperty,
-}) as 'controlValue';
-
-/**
- * A utility type that extracts the keys from `T` where the value type matches `TCondition`.
- * @template T The object type to extract keys from.
- * @template TCondition The condition to match the value type against.
- */
-type KeysWithValueType<T, TCondition> = keyof {
-  [K in keyof T as T[K] extends TCondition ? K : never]: never;
-};
-
-/**
- * The keys of `ɵFieldState` that can be bound to a control.
- * These are the properties of `ɵFieldState` that are signals or undefined, except for `value`
- * which is not bound directly, but updated indirectly through the `controlValue` binding.
- */
-type ControlBindingKeys = Exclude<
-  KeysWithValueType<ɵFieldState<unknown>, Signal<any> | undefined>,
-  'value'
->;
-
-/**
- * A map of control binding keys to their values.
- * Used to store the last seen values of bound control properties to check for changes.
- */
-type ControlBindings = {
-  [K in ControlBindingKeys]?: unknown;
-} & {
-  classes: {[className: string]: boolean};
-};
-
-/**
- * A map of field state properties to control binding name.
- *
- * This excludes `controlValue` whose corresponding control binding name differs between control
- * types.
- *
- * The control binding name can be used for inputs or attributes (since DOM attributes are case
- * insensitive).
- */
-const CONTROL_BINDING_NAMES = {
-  disabled: 'disabled',
-  disabledReasons: 'disabledReasons',
-  dirty: 'dirty',
-  errors: 'errors',
-  hidden: 'hidden',
-  invalid: 'invalid',
-  max: 'max',
-  maxLength: 'maxLength',
-  min: 'min',
-  minLength: 'minLength',
-  name: 'name',
-  pattern: 'pattern',
-  pending: 'pending',
-  readonly: 'readonly',
-  required: 'required',
-  touched: 'touched',
-} as const satisfies Record<Exclude<ControlBindingKeys, 'controlValue'>, string>;
-
-/** The keys of {@link CONTROL_BINDING_NAMES} */
-const CONTROL_BINDING_KEYS = /* @__PURE__ */ (() => Object.keys(CONTROL_BINDING_NAMES))() as Array<
-  keyof typeof CONTROL_BINDING_NAMES
->;
-
-/**
- * Returns the values of field state properties bound to a control.
- */
-function getControlBindings(lView: LView): ControlBindings {
-  const bindingIndex = getBindingIndex();
-  let bindings = lView[bindingIndex];
-  if (bindings === NO_CHANGE) {
-    bindings = lView[bindingIndex] = {};
-  }
-  return bindings;
-}
-
-/**
- * Updates a control binding if changed, then returns whether it was updated.
- *
- * @param bindings The control bindings to check.
- * @param key The key of the binding to check.
- * @param value The new value to check against.
- * @returns `true` if the binding has changed.
- */
-function controlBindingUpdated(
-  bindings: ControlBindings,
-  key: Exclude<ControlBindingKeys, 'classes'>,
-  value: unknown,
-): boolean {
-  const oldValue = bindings[key];
-  if (Object.is(oldValue, value)) {
-    return false;
-  }
-  bindings[key] = value;
-  return true;
-}
-
-/**
- * Updates a control class binding if changed, then returns whether it was updated.
- *
- * @param bindings The control class bindings to check.
- * @param className The class name to check.
- * @param value The new value to check against.
- * @returns `true` if the class binding has changed.
- */
-function controlClassBindingUpdated(
-  bindings: {[className: string]: boolean},
-  className: string,
-  value: boolean,
-): boolean {
-  const oldValue = bindings[className];
-  if (Object.is(oldValue, value)) {
-    return false;
-  }
-  bindings[className] = value;
-  return true;
-}
-
-/**
- * Sets a boolean attribute on an element.
- *
- * @param renderer The `Renderer` instance to use.
- * @param element The element to set the attribute on.
- * @param name The name of the attribute.
- * @param value The boolean value of the attribute. If `true`, the attribute is added. If `false`,
- *   the attribute is removed.
- */
-function setBooleanAttribute(
-  renderer: Renderer,
-  element: HTMLElement,
-  name: string,
-  value: boolean,
-) {
-  if (value) {
-    renderer.setAttribute(element, name, '');
-  } else {
-    renderer.removeAttribute(element, name);
-  }
-}
-
-/**
- * Sets an attribute on an element if the value is not `undefined`.
- *
- * @param renderer The `Renderer` instance to use.
- * @param element The element to set the attribute on.
- * @param name The name of the attribute.
- * @param value The value of the attribute. If `undefined`, the attribute is removed.
- */
-function setOptionalAttribute(
-  renderer: Renderer,
-  element: HTMLElement,
-  name: string,
-  value?: {toString(): string},
-) {
-  if (value !== undefined) {
-    renderer.setAttribute(element, name, value.toString());
-  } else {
-    renderer.removeAttribute(element, name);
-  }
-}
diff --git a/packages/core/src/render3/instructions/let_declaration.ts b/packages/core/src/render3/instructions/let_declaration.ts
index dabac9aac37..04205147c5e 100644
--- a/packages/core/src/render3/instructions/let_declaration.ts
+++ b/packages/core/src/render3/instructions/let_declaration.ts
@@ -1,4 +1,4 @@
-/*!
+/**
  * @license
  * Copyright Google LLC All Rights Reserved.
  *
diff --git a/packages/core/src/render3/interfaces/control.ts b/packages/core/src/render3/interfaces/control.ts
index b6b258f1679..a57229e2904 100644
--- a/packages/core/src/render3/interfaces/control.ts
+++ b/packages/core/src/render3/interfaces/control.ts
@@ -5,205 +5,80 @@
  * 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 {Signal} from '../reactivity/api';
-import {WritableSignal} from '../reactivity/signal';
-
-/** A unique symbol used to identify {@link ɵFormFieldDirective} implementations. */
-export const ɵCONTROL: unique symbol = Symbol('CONTROL');
 
 /**
- * Instructions for dynamically binding a {@link ɵFormFieldDirective} to a form control.
+ * A control directive definition that captures control-related behavior for a directive.
+ *
+ * This is the type of `DirectiveDef.controlDef`.
+ *
+ * @see ɵɵControlFeature
  */
-export interface ɵControlBinding {
-  create(): void;
-  update(): void;
+export interface ControlDirectiveDef {
+  readonly passThroughInput: string | null;
+  readonly create: (instance: unknown, host: ControlDirectiveHost) => void;
+  readonly update: (instance: unknown, host: ControlDirectiveHost) => void;
 }
 
 /**
- * A directive that binds a {@link ɵFieldState} to a form control.
+ * Interface provided by the runtime to directives that act as form controls, as the argument to
+ * `ɵngControlCreate` and `ɵngControlUpdate` lifecycle hooks.
+ *
+ * @param _TPassthroughInput if given, the name of an input which, if found on other directives,
+ *   will cause the control infrastructure to recognize this usage as "pass-through". This sets
+ *   the `hasPassThrough` flag. This generic is only read by the compiler on the type declaration
+ *   of `ɵngControlCreate`, and has no impact on the type of the host.
  */
-export interface ɵFormFieldDirective<T> {
+export interface ControlDirectiveHost<_TPassthroughInput extends string | undefined = undefined> {
   /**
-   * The presence of this property is used to identify {@link ɵFormFieldDirective} implementations,
-   * while the value is used to store the instructions for dynamically binding to a form control.
-   * The instructions are stored on the directive so that they can be tree-shaken when the directive
-   * is not used.
+   * A string that describes this control directive, used for error messages.
    */
-  readonly [ɵCONTROL]: ɵControlBinding;
-
-  readonly element: HTMLElement;
-
-  /** The state of the field bound to this control. */
-  readonly state: Signal<ɵFieldState<T>>;
-
-  /** Options for the control. */
-  readonly classes: ReadonlyArray<readonly [string, Signal<boolean>]>;
+  readonly descriptor: string;
 
   /**
-   * A subset of the field state errors that apply specifically to this binding directive.
-   * While standard validation errors produced by the schema apply to all binding directives that
-   * bind that particular field, parse errors belong to a specific binding directive.
+   * Whether any other directive on the element has an input that matches this directive's
+   * `_TPassThroughInput` declaration.
    */
-  readonly errors: Signal<unknown[]>;
-
-  /** A reference to the interoperable control, if one is present. */
-  readonly ɵinteropControl: ɵInteropControl | undefined;
+  readonly hasPassThrough: boolean;
 
   /**
-   * Registers this directive as a control of its associated form field.
+   * A `FormUiControl` instance that this directive is declared on.
+   */
+  readonly customControl: unknown | undefined;
+
+  /**
+   * Registers a listener that will be called when the custom control's value changes.
    *
-   * The presence of this directive alone is not sufficient to determine whether it'll control
-   * the bound field. If this directive's host is a component with a `field` input, we assume
-   * the component will forward the bound field to another field directive in its own template,
-   * and do nothing.
+   * This abstracts over the fact that different types of custom controls use different model
+   * names (`value` vs `checked`).
    */
-  registerAsBinding(bindingOptions?: ɵFormFieldBindingOptions): void;
-}
-
-/** A custom UI control for signal forms. */
-export interface ɵFormFieldBindingOptions {
-  /** Focuses the custom control. */
-  focus?(options?: FocusOptions): void;
-}
-
-/** Mirrors the `ControlValueAccessor` interface for interoperability.  */
-export interface ɵInteropControl {
-  /** Registers a callback function that is called when the control's value changes. */
-  registerOnChange(fn: Function): void;
-
-  /** Registers a callback function that is called when the control is touched. */
-  registerOnTouched(fn: Function): void;
-
-  /** Writes a new value to the control. */
-  writeValue(value: unknown): void;
-
-  /** Sets the disabled status of the control. */
-  setDisabledState?(value: boolean): void;
-}
-
-/**
- * The state of a form field to be synchronized with its bound control.
- */
-export interface ɵFieldState<T> {
-  /**
-   * A signal containing the current errors for the field.
-   */
-  readonly errors: Signal<unknown>;
-
-  /**
-   * A signal indicating whether the field is valid.
-   */
-  readonly invalid: Signal<boolean>;
-
-  /**
-   * A signal indicating whether the field is currently disabled.
-   */
-  readonly disabled: Signal<boolean>;
-
-  /**
-   * A signal containing the reasons why the field is currently disabled.
-   */
-  readonly disabledReasons: Signal<unknown>;
-
-  /**
-   * A signal indicating the field's maximum value, if applicable.
-   *
-   * Applies to `<input>` with a numeric or date `type` attribute and custom controls.
-   */
-  readonly max?: Signal<number | undefined>;
-
-  /**
-   * A signal indicating the field's maximum string length, if applicable.
-   *
-   * Applies to `<input>`, `<textarea>`, and custom controls.
-   */
-  readonly maxLength?: Signal<number | undefined>;
-
-  /**
-   * A signal indicating the field's minimum value, if applicable.
-   *
-   * Applies to `<input>` with a numeric or date `type` attribute and custom controls.
-   */
-  readonly min?: Signal<number | undefined>;
-
-  /**
-   * A signal indicating the field's minimum string length, if applicable.
-   *
-   * Applies to `<input>`, `<textarea>`, and custom controls.
-   */
-  readonly minLength?: Signal<number | undefined>;
-
-  /**
-   * A signal of a unique name for the field, by default based on the name of its parent field.
-   */
-  readonly name: Signal<string>;
-
-  /**
-   * A signal indicating the patterns the field must match.
-   */
-  readonly pattern: Signal<readonly RegExp[]>;
-
-  /**
-   * A signal indicating whether the field is currently readonly.
-   */
-  readonly readonly: Signal<boolean>;
-
-  /**
-   * A signal indicating whether the field is required.
-   */
-  readonly required: Signal<boolean>;
-
-  /**
-   * A signal indicating whether the field has been touched by the user.
-   */
-  readonly touched: Signal<boolean>;
-
-  /**
-   * A signal indicating whether the field value has been changed by user.
-   */
-  readonly dirty: Signal<boolean>;
-
-  /**
-   * A signal indicating whether the field is hidden.
-   */
-  readonly hidden: Signal<boolean>;
-
-  /**
-   * A signal indicating whether there are any validators still pending for this field.
-   */
-  readonly pending: Signal<boolean>;
-
-  /**
-   * A writable signal containing the value for this field.
-   *
-   * Updating this signal will update the data model that the field is bound to.
-   *
-   * While updates from the UI control are eventually reflected here, they may be delayed if
-   * debounced.
-   */
-  readonly value: WritableSignal<T>;
-
-  /**
-   * A signal containing the value of the control to which this field is bound.
-   *
-   * This differs from {@link value} in that it's not subject to debouncing, and thus is used to
-   * buffer debounced updates from the control to the field. This will also not take into account
-   * the {@link controlValue} of children.
-   */
-  readonly controlValue: Signal<T>;
-
-  /**
-   * Sets the dirty status of the field to `true`.
-   */
-  markAsDirty(): void;
-
-  /**
-   * Sets the touched status of the field to `true`.
-   */
-  markAsTouched(): void;
-
-  /**
-   * Sets {@link controlValue} immediately and triggers synchronization to {@link value}.
-   */
-  setControlValue(value: T): void;
+  listenToCustomControlModel(listener: (value: unknown) => void): void;
+
+  /**
+   * Registers a listener that will be called when the custom control emits an output.
+   */
+  listenToCustomControlOutput(outputName: string, listener: () => void): void;
+
+  /**
+   * Sets the custom control's value.
+   *
+   * This abstracts over the fact that different types of custom controls use different model
+   * names (`value` vs `checked`).
+   */
+  setCustomControlModelInput(value: unknown): void;
+
+  /**
+   * Checks if the custom control has an input with the given name.
+   */
+  customControlHasInput(inputName: string): boolean;
+
+  /**
+   * Updates a property binding on all directives on this node, aside from the control directive
+   * itself.
+   */
+  setInputOnDirectives(inputName: string, value: unknown): boolean;
+
+  /**
+   * Listens to a DOM event on the host element.
+   */
+  listenToDom(eventName: string, listener: (event: Event) => void): void;
 }
diff --git a/packages/core/src/render3/interfaces/definition.ts b/packages/core/src/render3/interfaces/definition.ts
index 27a09d329de..17965514d7f 100644
--- a/packages/core/src/render3/interfaces/definition.ts
+++ b/packages/core/src/render3/interfaces/definition.ts
@@ -18,6 +18,7 @@ import {TAttributes, TConstantsOrFactory} from './node';
 import {CssSelectorList} from './projection';
 import type {TView} from './view';
 import {InputFlags} from './input_flags';
+import type {ControlDirectiveDef} from './control';
 
 /**
  * Definition of what a template rendering function should look like for a component.
@@ -262,6 +263,8 @@ export interface DirectiveDef<T> {
    */
   hostDirectives: (HostDirectiveDef | (() => HostDirectiveConfig[]))[] | null;
 
+  controlDef: ControlDirectiveDef | null;
+
   setInput:
     | (<U extends T>(
         this: DirectiveDef<U>,
@@ -548,11 +551,8 @@ export type DependencyDef = DirectiveDef<unknown> | ComponentDef<unknown> | Pipe
 
 export type DirectiveTypesOrFactory = (() => DirectiveTypeList) | DirectiveTypeList;
 
-export type DirectiveTypeList = (
-  | DirectiveType<any>
-  | ComponentType<any>
-  | Type<any>
-) /* Type as workaround for: Microsoft/TypeScript/issues/4881 */[];
+export type DirectiveTypeList = (DirectiveType<any> | ComponentType<any> | Type<any>)[];
+/* Type as workaround for: Microsoft/TypeScript/issues/4881 */
 
 export type DependencyType = DirectiveType<any> | ComponentType<any> | PipeType<any> | Type<any>;
 
@@ -573,10 +573,8 @@ export type PipeDefList = PipeDef<any>[];
 
 export type PipeTypesOrFactory = (() => PipeTypeList) | PipeTypeList;
 
-export type PipeTypeList = (
-  | PipeType<any>
-  | Type<any>
-) /* Type as workaround for: Microsoft/TypeScript/issues/4881 */[];
+export type PipeTypeList = (PipeType<any> | Type<any>)[];
+/* Type as workaround for: Microsoft/TypeScript/issues/4881 */
 
 /**
  * NgModule scope info as provided by AoT compiler
diff --git a/packages/core/src/render3/interfaces/node.ts b/packages/core/src/render3/interfaces/node.ts
index 0b0d663c5e6..5023ce65682 100644
--- a/packages/core/src/render3/interfaces/node.ts
+++ b/packages/core/src/render3/interfaces/node.ts
@@ -78,6 +78,11 @@ export const enum TNodeType {
    */
   LetDeclaration = 0b10000000,
 
+  /**
+   * The TNode contains a control directive's update function.
+   */
+  ControlDirective = 0b100000000,
+
   // Combined Types These should never be used for `TNode.type` only as a useful way to check
   // if `TNode.type` is one of several choices.
 
@@ -190,29 +195,7 @@ export const enum TNodeFlags {
    *
    * This is used to bind to a `ControlValueAccessor` from `@angular/forms`.
    */
-  isInteropControl = 1 << 12,
-
-  /**
-   * Bit #14 - This bit is set if the node is a native control.
-   *
-   * This is used to determine whether we can bind common control properties to the host element of
-   * a custom control when it doesn't define a corresponding input.
-   */
-  isNativeControl = 1 << 13,
-
-  /**
-   * Bit #15 - This bit is set if the node is a native control with a numeric type.
-   *
-   * This is used to determine whether the control supports the `min` and `max` properties.
-   */
-  isNativeNumericControl = 1 << 14,
-
-  /**
-   * Bit #16 - This bit is set if the node is a native text control.
-   *
-   * This is used to determine whether control supports the `minLength` and `maxLength` properties.
-   */
-  isNativeTextControl = 1 << 15,
+  isPassThroughControl = 1 << 12,
 }
 
 /**
@@ -377,7 +360,7 @@ export interface TNode {
    * Index at which the signal forms field directive is stored.
    * Value is set to -1 if there are no field directives.
    */
-  fieldIndex: number;
+  controlDirectiveIndex: number;
 
   /**
    * Index at which the custom control directive is stored.
diff --git a/packages/core/src/render3/jit/directive.ts b/packages/core/src/render3/jit/directive.ts
index 68c05a73c72..6793ccd3fd6 100644
--- a/packages/core/src/render3/jit/directive.ts
+++ b/packages/core/src/render3/jit/directive.ts
@@ -384,6 +384,7 @@ export function directiveMetadata(type: Type<any>, metadata: Directive): R3Direc
     outputs: metadata.outputs || EMPTY_ARRAY,
     queries: extractQueriesMetadata(type, propMetadata, isContentQuery),
     lifecycle: {usesOnChanges: reflect.hasLifecycleHook(type, 'ngOnChanges')},
+    controlCreate: null,
     typeSourceSpan: null!,
     usesInheritance: !extendsDirectlyFromObject(type),
     exportAs: extractExportAs(metadata.exportAs),
diff --git a/packages/core/src/render3/jit/environment.ts b/packages/core/src/render3/jit/environment.ts
index 4393ef04b05..5274ca2936b 100644
--- a/packages/core/src/render3/jit/environment.ts
+++ b/packages/core/src/render3/jit/environment.ts
@@ -41,6 +41,7 @@ export const angularCoreEnv: {[name: string]: unknown} = (() => ({
   'ɵɵresetView': r3.ɵɵresetView,
   'ɵɵHostDirectivesFeature': r3.ɵɵHostDirectivesFeature,
   'ɵɵNgOnChangesFeature': r3.ɵɵNgOnChangesFeature,
+  'ɵɵControlFeature': r3.ɵɵControlFeature,
   'ɵɵProvidersFeature': r3.ɵɵProvidersFeature,
   'ɵɵInheritDefinitionFeature': r3.ɵɵInheritDefinitionFeature,
   'ɵɵExternalStylesFeature': r3.ɵɵExternalStylesFeature,
diff --git a/packages/core/src/render3/tnode_manipulation.ts b/packages/core/src/render3/tnode_manipulation.ts
index 23625816fbf..9f14220c138 100644
--- a/packages/core/src/render3/tnode_manipulation.ts
+++ b/packages/core/src/render3/tnode_manipulation.ts
@@ -298,7 +298,7 @@ export function createTNode(
     directiveEnd: -1,
     directiveStylingLast: -1,
     componentOffset: -1,
-    fieldIndex: -1,
+    controlDirectiveIndex: -1,
     customControlIndex: -1,
     propertyBindings: null,
     flags,
diff --git a/packages/core/src/render3/view/listeners.ts b/packages/core/src/render3/view/listeners.ts
index 947b6909728..c673ec58961 100644
--- a/packages/core/src/render3/view/listeners.ts
+++ b/packages/core/src/render3/view/listeners.ts
@@ -44,7 +44,7 @@ import {
  */
 export function wrapListener(
   tNode: TNode,
-  lView: LView<{} | null>,
+  lView: LView,
   listenerFn: EventCallback,
 ): WrappedEventCallback {
   // Note: we are performing most of the work in the listener function itself
@@ -72,13 +72,13 @@ export function wrapListener(
 
 function executeListenerWithErrorHandling(
   lView: LView,
-  context: {} | null,
+  context: unknown,
   listenerFn: EventCallback,
   e: any,
 ): boolean {
   const prevConsumer = setActiveConsumer(null);
   try {
-    profiler(ProfilerEvent.OutputStart, context, listenerFn);
+    profiler(ProfilerEvent.OutputStart, context as {} | null, listenerFn);
     // Only explicitly returning false from a listener should preventDefault
     return listenerFn(e) !== false;
   } catch (error) {
diff --git a/packages/core/test/bundling/create_component/bundle.golden_symbols.json b/packages/core/test/bundling/create_component/bundle.golden_symbols.json
index 3d00a617557..1b5f2ae5b89 100644
--- a/packages/core/test/bundling/create_component/bundle.golden_symbols.json
+++ b/packages/core/test/bundling/create_component/bundle.golden_symbols.json
@@ -43,6 +43,7 @@
       "ComponentRef",
       "ComponentRef2",
       "ConsumerObserver",
+      "ControlDirectiveHostImpl",
       "DEBUG_TASK_TRACKER",
       "DECLARATION_COMPONENT_VIEW",
       "DECLARATION_LCONTAINER",
@@ -80,7 +81,6 @@
       "EventEmitter_",
       "EventManager",
       "EventManagerPlugin",
-      "FIELD_BINDING_METADATA",
       "FLAGS",
       "FieldComponent",
       "FieldDirective",
@@ -206,7 +206,6 @@
       "XhrFactory",
       "ZONELESS_ENABLED",
       "ZoneAwareEffectScheduler",
-      "\\u0275CONTROL",
       "\\u0275\\u0275defineComponent",
       "\\u0275\\u0275defineDirective",
       "\\u0275\\u0275defineInjectable",
@@ -244,6 +243,7 @@
       "_platformInjector",
       "_processI18nInsertBefore",
       "_retrieveHydrationInfoImpl",
+      "_stashEventListenerImpl",
       "_wasLastNodeCreated",
       "activeConsumer",
       "addAfterRenderSequencesForView",
@@ -299,7 +299,8 @@
       "consumerMarkDirty",
       "consumerPollProducersForChange",
       "context",
-      "controlBinding",
+      "controlCreateInternal",
+      "controlUpdateInternal",
       "convertToBitFlags",
       "convertToInjectOptions",
       "couldBeInjectableType",
@@ -368,6 +369,7 @@
       "executeCheckHooks",
       "executeContentQueries",
       "executeInitAndCheckHooks",
+      "executeListenerWithErrorHandling",
       "executeOnDestroys",
       "executeTemplate",
       "executeViewQueryFn",
@@ -375,6 +377,7 @@
       "extractDefListOrFactory",
       "extractDirectiveDef",
       "finalizeConsumerAfterComputation",
+      "findExistingListener",
       "findMatchingDehydratedView",
       "forEachSingleProvider",
       "forkInnerZoneWithAngularBehavior",
@@ -424,8 +427,10 @@
       "getOrBorrowReactiveLViewConsumer",
       "getOrCreateComponentTView",
       "getOrCreateInjectable",
+      "getOrCreateLViewCleanup",
       "getOrCreateNodeInjectorForNode",
       "getOrCreateTNode",
+      "getOrCreateTViewCleanup",
       "getOrCreateTemporaryConsumer",
       "getOrCreateViewRefs",
       "getOwnDefinition",
@@ -449,12 +454,16 @@
       "getUniqueLViewId",
       "getViewRefs",
       "handleStoppedNotification",
+      "handleUncaughtError",
       "handleUnhandledError",
       "hasApplyArgsData",
       "hasDeps",
       "hasInSkipHydrationBlockFlag",
+      "hasInput",
       "hasLift",
+      "hasModelInput",
       "hasOnDestroy",
+      "hasOutput",
       "hasParentInjector",
       "icuContainerIterate",
       "identity",
@@ -466,6 +475,8 @@
       "initDomAdapter",
       "initFeatures",
       "initTNodeFlags",
+      "initializeControlFirstCreatePass",
+      "initializeCustomControlStatus",
       "initializeDirectives",
       "initializeInputAndOutputAliases",
       "inject2",
@@ -492,6 +503,7 @@
       "invokeDirectivesHostBindings",
       "invokeHostBindingsInCreationMode",
       "isAngularZoneProperty",
+      "isAnimationEventType",
       "isAnimationProp",
       "isApplicationBootstrapConfig",
       "isBoundToModule",
@@ -501,6 +513,7 @@
       "isCurrentTNodeParent",
       "isDestroyed",
       "isDetachedByI18n",
+      "isDirectiveHost",
       "isEnvironmentProviders",
       "isExistingProvider",
       "isFactoryProvider",
@@ -534,6 +547,8 @@
       "leaveView",
       "leaveViewLight",
       "linkTNodeInTView",
+      "listenToDomEvent",
+      "listenToOutput",
       "locateDirectiveOrProvider",
       "locateHostElement",
       "lookupTokenUsingEmbeddedInjector",
@@ -663,7 +678,9 @@
       "shouldSearchParent",
       "signalSetFn",
       "signalValueChanged",
+      "stashEventListenerImpl",
       "storeLViewOnDestroy",
+      "storeListenerCleanup",
       "stringify",
       "stringifyCSSSelector",
       "stringifyCSSSelectorList",
@@ -687,6 +704,7 @@
       "viewShouldHaveReactiveConsumer",
       "walkProviderTree",
       "wasLastNodeCreated",
+      "wrapListener",
       "writeDirectClass",
       "writeDirectStyle",
       "writeToDirectiveInput"
diff --git a/packages/core/test/render3/is_shape_of.ts b/packages/core/test/render3/is_shape_of.ts
index 827bc3bd6bf..0adadc1ac5b 100644
--- a/packages/core/test/render3/is_shape_of.ts
+++ b/packages/core/test/render3/is_shape_of.ts
@@ -154,7 +154,7 @@ const ShapeOfTNode: ShapeOf<TNode> = {
   directiveEnd: true,
   directiveStylingLast: true,
   componentOffset: true,
-  fieldIndex: true,
+  controlDirectiveIndex: true,
   customControlIndex: true,
   propertyBindings: true,
   flags: true,
diff --git a/packages/forms/signals/public_api.ts b/packages/forms/signals/public_api.ts
index 1d8f07fbfe9..2bab39d9083 100644
--- a/packages/forms/signals/public_api.ts
+++ b/packages/forms/signals/public_api.ts
@@ -13,7 +13,7 @@
  */
 export * from './src/api/control';
 export * from './src/api/di';
-export * from './src/api/form_field_directive';
+export * from './src/directive/form_field_directive';
 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/control.ts b/packages/forms/signals/src/api/control.ts
index c94922ea9a5..8aa4a6a7930 100644
--- a/packages/forms/signals/src/api/control.ts
+++ b/packages/forms/signals/src/api/control.ts
@@ -6,15 +6,9 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {
-  InputSignal,
-  InputSignalWithTransform,
-  ModelSignal,
-  OutputRef,
-  type Signal,
-} from '@angular/core';
-import type {FormFieldBindingOptions} from './form_field_directive';
-import {ValidationError, type WithOptionalFieldTree} from './rules/validation/validation_errors';
+import {InputSignal, InputSignalWithTransform, ModelSignal, OutputRef, Signal} from '@angular/core';
+import type {FormFieldBindingOptions} from '../directive/form_field_directive';
+import type {ValidationError, WithOptionalFieldTree} from './rules/validation/validation_errors';
 import type {DisabledReason} from './types';
 
 /**
@@ -72,6 +66,7 @@ export interface FormUiControl<TValue> {
     | InputSignal<boolean>
     | InputSignalWithTransform<boolean, unknown>
     | OutputRef<boolean>;
+
   /**
    * An input to receive the dirty status for the field. If implemented, the `Field` directive
    * will automatically bind the dirty status from the bound field to this input.
@@ -142,7 +137,7 @@ export interface FormUiControl<TValue> {
 // However, we don't want to add it as an actual `extends` clause to avoid confusing users.
 type Check<T extends true> = T;
 type FormUiControlImplementsFormFieldBindingOptions = Check<
-  FormUiControl<unknown> extends FormFieldBindingOptions<unknown> ? true : false
+  FormUiControl<unknown> extends FormFieldBindingOptions ? true : false
 >;
 
 /**
diff --git a/packages/forms/signals/src/api/di.ts b/packages/forms/signals/src/api/di.ts
index f85e4cb9850..051e8285bce 100644
--- a/packages/forms/signals/src/api/di.ts
+++ b/packages/forms/signals/src/api/di.ts
@@ -8,7 +8,7 @@
 
 import {type Provider} from '@angular/core';
 import {SIGNAL_FORMS_CONFIG} from '../field/di';
-import type {FormField} from './form_field_directive';
+import type {FormField} from '../directive/form_field_directive';
 
 /**
  * Configuration options for signal forms.
diff --git a/packages/forms/signals/src/api/form_field_directive.ts b/packages/forms/signals/src/api/form_field_directive.ts
deleted file mode 100644
index 3f51942df30..00000000000
--- a/packages/forms/signals/src/api/form_field_directive.ts
+++ /dev/null
@@ -1,203 +0,0 @@
-/**
- * @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 {
-  computed,
-  ɵɵcontrolCreate as createControlBinding,
-  Directive,
-  effect,
-  ElementRef,
-  inject,
-  InjectionToken,
-  Injector,
-  input,
-  ɵRuntimeError as RuntimeError,
-  signal,
-  untracked,
-  ɵcontrolUpdate as updateControlBinding,
-  ɵCONTROL,
-  ɵInteropControl,
-  type Signal,
-  type ɵFormFieldBindingOptions,
-  type ɵFormFieldDirective,
-} from '@angular/core';
-import {NG_VALUE_ACCESSOR, NgControl} from '@angular/forms';
-import {InteropNgControl} from '../controls/interop_ng_control';
-import {SignalFormsErrorCode} from '../errors';
-import {SIGNAL_FORMS_CONFIG} from '../field/di';
-import type {FieldNode} from '../field/node';
-import type {ValidationError} from './rules';
-import type {FieldTree} from './types';
-
-export interface FormFieldBindingOptions<TValue> extends ɵFormFieldBindingOptions {
-  /**
-   * Focuses the binding.
-   *
-   * If not specified, Signal Forms will attempt to focus the host element of the `FormField` when
-   * asked to focus this binding.
-   */
-  focus?(options?: FocusOptions): void;
-
-  readonly parseErrors?: Signal<ValidationError.WithoutFieldTree[]>;
-}
-
-/**
- * Lightweight DI token provided by the {@link FormField} directive.
- *
- * @category control
- * @experimental 21.0.0
- */
-export const FORM_FIELD = new InjectionToken<FormField<unknown>>(
-  typeof ngDevMode !== 'undefined' && ngDevMode ? 'FORM_FIELD' : '',
-);
-
-/**
- * Instructions for dynamically binding a {@link FormField} to a form control.
- */
-const controlInstructions = {
-  create: createControlBinding,
-  update: updateControlBinding,
-} as const;
-
-/**
- * Binds a form `FieldTree` to a UI control that edits it. A UI control can be one of several things:
- * 1. A native HTML input or textarea
- * 2. A signal forms custom control that implements `FormValueControl` or `FormCheckboxControl`
- * 3. A component that provides a `ControlValueAccessor`. This should only be used for backwards
- *    compatibility with reactive forms. Prefer options (1) and (2).
- *
- * This directive has several responsibilities:
- * 1. Two-way binds the field state's value with the UI control's value
- * 2. Binds additional forms related state on the field state to the UI control (disabled, required, etc.)
- * 3. Relays relevant events on the control to the field state (e.g. marks touched on blur)
- * 4. Provides a fake `NgControl` that implements a subset of the features available on the
- *    reactive forms `NgControl`. This is provided to improve interoperability with controls
- *    designed to work with reactive forms. It should not be used by controls written for signal
- *    forms.
- *
- * @category control
- * @experimental 21.0.0
- */
-@Directive({
-  selector: '[formField]',
-  exportAs: 'formField',
-  providers: [
-    {provide: FORM_FIELD, useExisting: FormField},
-    {provide: NgControl, useFactory: () => inject(FormField).getOrCreateNgControl()},
-  ],
-})
-// This directive should `implements ɵFormFieldDirective<T>`, but actually adding that breaks people's
-// builds because part of the public API is marked `@internal` and stripped.
-// Instead we have an type check below that enforces this in a non-breaking way.
-export class FormField<T> {
-  readonly element = inject<ElementRef<HTMLElement>>(ElementRef).nativeElement;
-  readonly injector = inject(Injector);
-  readonly fieldTree = input.required<FieldTree<T>>({alias: 'formField'});
-  readonly state = computed(() => this.fieldTree()());
-  private readonly bindingOptions = signal<FormFieldBindingOptions<T> | undefined>(undefined);
-
-  /** @internal */
-  readonly parseErrors = computed<ValidationError.WithFormField[]>(
-    () =>
-      this.bindingOptions()
-        ?.parseErrors?.()
-        .map((err) => ({
-          ...err,
-          fieldTree: this.fieldTree(),
-          formField: this as FormField<unknown>,
-        })) ?? [],
-  );
-
-  /** Errors associated with this form field. */
-  readonly errors = computed(() =>
-    this.state()
-      .errors()
-      .filter((err) => !err.formField || err.formField === this),
-  );
-
-  readonly [ɵCONTROL] = controlInstructions;
-
-  private config = inject(SIGNAL_FORMS_CONFIG, {optional: true});
-  /** @internal */
-  readonly classes = Object.entries(this.config?.classes ?? {}).map(
-    ([className, computation]) =>
-      [className, computed(() => computation(this as FormField<unknown>))] as const,
-  );
-
-  /** Any `ControlValueAccessor` instances provided on the host element. */
-  private readonly controlValueAccessors = inject(NG_VALUE_ACCESSOR, {optional: true, self: true});
-
-  /** A lazily instantiated fake `NgControl`. */
-  private interopNgControl: InteropNgControl | undefined;
-
-  /**
-   * A `ControlValueAccessor`, if configured, for the host component.
-   *
-   * @internal
-   */
-  get ɵinteropControl(): ɵInteropControl | undefined {
-    return this.controlValueAccessors?.[0] ?? this.interopNgControl?.valueAccessor ?? undefined;
-  }
-
-  /** Lazily instantiates a fake `NgControl` for this form field. */
-  protected getOrCreateNgControl(): InteropNgControl {
-    return (this.interopNgControl ??= new InteropNgControl(this.state));
-  }
-
-  /**
-   * Registers this `FormField` as a binding on its associated `FieldState`.
-   *
-   * This method should be called at most once for a given `FormField`. A `FormField` placed on a
-   * custom control (`FormUiControl`) automatically registers that custom control as a binding.
-   */
-  registerAsBinding(bindingOptions?: FormFieldBindingOptions<T>) {
-    if (untracked(this.bindingOptions)) {
-      throw new RuntimeError(
-        SignalFormsErrorCode.BINDING_ALREADY_REGISTERED,
-        ngDevMode && 'FormField already registered as a binding',
-      );
-    }
-
-    this.bindingOptions.set(bindingOptions);
-    // Register this control on the field state it is currently bound to. We do this at the end of
-    // initialization so that it only runs if we are actually syncing with this control
-    // (as opposed to just passing the field state through to its `formField` input).
-    effect(
-      (onCleanup) => {
-        const fieldNode = this.state() as unknown as FieldNode;
-        fieldNode.nodeState.formFieldBindings.update((controls) => [
-          ...controls,
-          this as FormField<unknown>,
-        ]);
-        onCleanup(() => {
-          fieldNode.nodeState.formFieldBindings.update((controls) =>
-            controls.filter((c) => c !== this),
-          );
-        });
-      },
-      {injector: this.injector},
-    );
-  }
-
-  /** Focuses this UI control. */
-  focus(options?: FocusOptions) {
-    const bindingOptions = untracked(this.bindingOptions);
-    if (bindingOptions?.focus) {
-      bindingOptions.focus(options);
-    } else {
-      this.element.focus(options);
-    }
-  }
-}
-
-// We can't add `implements ɵFormFieldDirective<T>` to `Field` even though it should conform to the interface.
-// Instead we enforce it here through some utility types.
-type Check<T extends true> = T;
-type FormFieldImplementsɵFormFieldDirective = Check<
-  FormField<any> extends ɵFormFieldDirective<any> ? true : false
->;
diff --git a/packages/forms/signals/src/api/rules/validation/validation_errors.ts b/packages/forms/signals/src/api/rules/validation/validation_errors.ts
index e93cc48335f..fce54fe2d29 100644
--- a/packages/forms/signals/src/api/rules/validation/validation_errors.ts
+++ b/packages/forms/signals/src/api/rules/validation/validation_errors.ts
@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import type {FormField} from '../../form_field_directive';
+import type {FormField} from '../../../directive/form_field_directive';
 import type {FieldTree} from '../../types';
 import type {StandardSchemaValidationError} from './standard_schema';
 
diff --git a/packages/forms/signals/src/api/types.ts b/packages/forms/signals/src/api/types.ts
index 27a62b9a8a0..707b9039df8 100644
--- a/packages/forms/signals/src/api/types.ts
+++ b/packages/forms/signals/src/api/types.ts
@@ -6,9 +6,9 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {Signal, ɵFieldState} from '@angular/core';
+import {Signal, WritableSignal} from '@angular/core';
 import {AbstractControl} from '@angular/forms';
-import type {FormField} from './form_field_directive';
+import type {FormField} from '../directive/form_field_directive';
 import type {MetadataKey, ValidationError} from './rules';
 
 /**
@@ -217,10 +217,75 @@ export type MaybeFieldTree<TModel, TKey extends string | number = string | numbe
  * @category structure
  * @experimental 21.0.0
  */
-export interface FieldState<
-  TValue,
-  TKey extends string | number = string | number,
-> extends ɵFieldState<TValue> {
+export interface FieldState<TValue, TKey extends string | number = string | number> {
+  /**
+   * A writable signal containing the value for this field.
+   *
+   * Updating this signal will update the data model that the field is bound to.
+   *
+   * While updates from the UI control are eventually reflected here, they may be delayed if
+   * debounced.
+   */
+  readonly value: WritableSignal<TValue>;
+
+  /**
+   * A signal indicating whether the field is currently disabled.
+   */
+  readonly disabled: Signal<boolean>;
+
+  /**
+   * A signal indicating the field's maximum value, if applicable.
+   *
+   * Applies to `<input>` with a numeric or date `type` attribute and custom controls.
+   */
+  readonly max?: Signal<number | undefined>;
+
+  /**
+   * A signal indicating the field's maximum string length, if applicable.
+   *
+   * Applies to `<input>`, `<textarea>`, and custom controls.
+   */
+  readonly maxLength?: Signal<number | undefined>;
+
+  /**
+   * A signal indicating the field's minimum value, if applicable.
+   *
+   * Applies to `<input>` with a numeric or date `type` attribute and custom controls.
+   */
+  readonly min?: Signal<number | undefined>;
+
+  /**
+   * A signal indicating the field's minimum string length, if applicable.
+   *
+   * Applies to `<input>`, `<textarea>`, and custom controls.
+   */
+  readonly minLength?: Signal<number | undefined>;
+
+  /**
+   * A signal of a unique name for the field, by default based on the name of its parent field.
+   */
+  readonly name: Signal<string>;
+
+  /**
+   * A signal indicating the patterns the field must match.
+   */
+  readonly pattern: Signal<readonly RegExp[]>;
+
+  /**
+   * A signal indicating whether the field is currently readonly.
+   */
+  readonly readonly: Signal<boolean>;
+
+  /**
+   * A signal indicating whether the field is required.
+   */
+  readonly required: Signal<boolean>;
+
+  /**
+   * A signal indicating whether the field has been touched by the user.
+   */
+  readonly touched: Signal<boolean>;
+
   /**
    * A signal indicating whether field value has been changed by user.
    */
@@ -290,6 +355,30 @@ export interface FieldState<
    */
   readonly formFieldBindings: Signal<readonly FormField<unknown>[]>;
 
+  /**
+   * A signal containing the value of the control to which this field is bound.
+   *
+   * This differs from {@link value} in that it's not subject to debouncing, and thus is used to
+   * buffer debounced updates from the control to the field. This will also not take into account
+   * the {@link controlValue} of children.
+   */
+  readonly controlValue: Signal<TValue>;
+
+  /**
+   * Sets {@link controlValue} immediately and triggers synchronization to {@link value}.
+   */
+  setControlValue(value: TValue): void;
+
+  /**
+   * Sets the dirty status of the field to `true`.
+   */
+  markAsDirty(): void;
+
+  /**
+   * Sets the touched status of the field to `true`.
+   */
+  markAsTouched(): void;
+
   /**
    * Reads a metadata value from the field.
    * @param key The metadata key to read.
diff --git a/packages/forms/signals/src/directive/bindings.ts b/packages/forms/signals/src/directive/bindings.ts
new file mode 100644
index 00000000000..f427e437b66
--- /dev/null
+++ b/packages/forms/signals/src/directive/bindings.ts
@@ -0,0 +1,84 @@
+/**
+ * @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 {FieldState} from '../api/types';
+
+/**
+ * Branded type for the public name of an input we bind on control components or DOM elements.
+ */
+export type ControlBindingKey = string & {__brand: 'ControlBindingKey'};
+
+/**
+ * A map of field state properties to control binding name.
+ *
+ * This excludes `controlValue` whose corresponding control binding name differs between control
+ * types.
+ *
+ * The control binding name can be used for inputs or attributes (since DOM attributes are case
+ * insensitive).
+ */
+const FIELD_STATE_KEY_TO_CONTROL_BINDING = {
+  disabled: 'disabled' as ControlBindingKey,
+  disabledReasons: 'disabledReasons' as ControlBindingKey,
+  dirty: 'dirty' as ControlBindingKey,
+  errors: 'errors' as ControlBindingKey,
+  hidden: 'hidden' as ControlBindingKey,
+  invalid: 'invalid' as ControlBindingKey,
+  max: 'max' as ControlBindingKey,
+  maxLength: 'maxLength' as ControlBindingKey,
+  min: 'min' as ControlBindingKey,
+  minLength: 'minLength' as ControlBindingKey,
+  name: 'name' as ControlBindingKey,
+  pattern: 'pattern' as ControlBindingKey,
+  pending: 'pending' as ControlBindingKey,
+  readonly: 'readonly' as ControlBindingKey,
+  required: 'required' as ControlBindingKey,
+  touched: 'touched' as ControlBindingKey,
+} as const satisfies {[K in keyof FieldState<unknown>]?: ControlBindingKey};
+
+/**
+ * Inverts `FIELD_STATE_KEY_TO_CONTROL_BINDING` to look up the minified name of the corresponding
+ * field state property from its control binding name.
+ */
+const CONTROL_BINDING_TO_FIELD_STATE_KEY = /* @__PURE__ */ (() => {
+  const map = {} as Record<ControlBindingKey, keyof typeof FIELD_STATE_KEY_TO_CONTROL_BINDING>;
+  for (const key of Object.keys(FIELD_STATE_KEY_TO_CONTROL_BINDING) as Array<
+    keyof typeof FIELD_STATE_KEY_TO_CONTROL_BINDING
+  >) {
+    map[FIELD_STATE_KEY_TO_CONTROL_BINDING[key]] = key;
+  }
+  return map;
+})();
+
+export function readFieldStateBindingValue(
+  fieldState: FieldState<unknown>,
+  key: ControlBindingKey,
+): unknown {
+  const property = CONTROL_BINDING_TO_FIELD_STATE_KEY[key];
+  return fieldState[property]?.();
+}
+
+/** The keys of {@link FIELD_STATE_KEY_TO_CONTROL_BINDING} */
+export const CONTROL_BINDING_NAMES = /* @__PURE__ */ (() =>
+  Object.values(FIELD_STATE_KEY_TO_CONTROL_BINDING))() as Array<ControlBindingKey>;
+
+export function createBindings<TKey extends string>(): {[K in TKey]?: unknown} {
+  return {};
+}
+
+export function bindingUpdated<TKey extends string>(
+  bindings: {[K in TKey]?: unknown},
+  key: TKey,
+  value: unknown,
+) {
+  if (bindings[key] !== value) {
+    bindings[key] = value;
+    return true;
+  }
+  return false;
+}
diff --git a/packages/forms/signals/src/directive/control_custom.ts b/packages/forms/signals/src/directive/control_custom.ts
new file mode 100644
index 00000000000..daade79b93b
--- /dev/null
+++ b/packages/forms/signals/src/directive/control_custom.ts
@@ -0,0 +1,63 @@
+/**
+ * @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 {ɵControlDirectiveHost as ControlDirectiveHost} from '@angular/core';
+import type {FormField} from './form_field_directive';
+import {
+  bindingUpdated,
+  CONTROL_BINDING_NAMES,
+  type ControlBindingKey,
+  createBindings,
+  readFieldStateBindingValue,
+} from './bindings';
+import {setNativeDomProperty} from './native';
+import {FormUiControl} from '../api/control';
+
+export function customControlCreate(
+  host: ControlDirectiveHost,
+  parent: FormField<unknown>,
+): () => void {
+  host.listenToCustomControlModel((value) => parent.state().setControlValue(value));
+  host.listenToCustomControlOutput('touchedChange', () => parent.state().markAsTouched());
+
+  parent.registerAsBinding(host.customControl as FormUiControl<unknown>);
+
+  const bindings = createBindings<ControlBindingKey | 'controlValue'>();
+  return () => {
+    const state = parent.state();
+    // Bind custom form control model ('value' or 'checked').
+    const controlValue = state.controlValue();
+    if (bindingUpdated(bindings, 'controlValue', controlValue)) {
+      host.setCustomControlModelInput(controlValue);
+    }
+
+    // Bind remaining field state properties.
+    for (const name of CONTROL_BINDING_NAMES) {
+      let value: unknown;
+      if (name === 'errors') {
+        value = parent.errors();
+      } else {
+        value = readFieldStateBindingValue(state, name);
+      }
+      if (bindingUpdated(bindings, name, value)) {
+        host.setInputOnDirectives(name, value);
+
+        // If the host node is a native control, we can bind field state properties to native
+        // properties for any that weren't defined as inputs on the custom control.
+        if (parent.elementAcceptsNativeProperty(name) && !host.customControlHasInput(name)) {
+          setNativeDomProperty(
+            parent.renderer,
+            parent.nativeFormElement!,
+            name,
+            value as string | number | undefined,
+          );
+        }
+      }
+    }
+  };
+}
diff --git a/packages/forms/signals/src/directive/control_cva.ts b/packages/forms/signals/src/directive/control_cva.ts
new file mode 100644
index 00000000000..c8f47b4a3bc
--- /dev/null
+++ b/packages/forms/signals/src/directive/control_cva.ts
@@ -0,0 +1,58 @@
+/**
+ * @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 {untracked, type ɵControlDirectiveHost as ControlDirectiveHost} from '@angular/core';
+import {
+  bindingUpdated,
+  CONTROL_BINDING_NAMES,
+  type ControlBindingKey,
+  createBindings,
+  readFieldStateBindingValue,
+} from './bindings';
+import {setNativeDomProperty} from './native';
+import type {FormField} from './form_field_directive';
+
+export function cvaControlCreate(
+  host: ControlDirectiveHost,
+  parent: FormField<unknown>,
+): () => void {
+  parent.controlValueAccessor!.registerOnChange((value: unknown) =>
+    parent.state().setControlValue(value as any),
+  );
+  parent.controlValueAccessor!.registerOnTouched(() => parent.state().markAsTouched());
+  parent.registerAsBinding();
+
+  const bindings = createBindings<ControlBindingKey | 'controlValue'>();
+  return () => {
+    const fieldState = parent.state();
+    const value = fieldState.value();
+    if (bindingUpdated(bindings, 'controlValue', value)) {
+      // We don't know if the interop control has underlying signals, so we must use `untracked` to
+      // prevent writing to a signal in a reactive context.
+      untracked(() => parent.controlValueAccessor!.writeValue(value));
+    }
+
+    for (const name of CONTROL_BINDING_NAMES) {
+      const value = readFieldStateBindingValue(fieldState, name);
+      if (bindingUpdated(bindings, name, value)) {
+        const propertyWasSet = host.setInputOnDirectives(name, value);
+        if (name === 'disabled' && parent.controlValueAccessor!.setDisabledState) {
+          untracked(() => parent.controlValueAccessor!.setDisabledState!(value as boolean));
+        } else if (!propertyWasSet && parent.elementAcceptsNativeProperty(name)) {
+          // Fall back to native DOM properties.
+          setNativeDomProperty(
+            parent.renderer,
+            parent.nativeFormElement,
+            name,
+            value as string | number | undefined,
+          );
+        }
+      }
+    }
+  };
+}
diff --git a/packages/forms/signals/src/directive/control_native.ts b/packages/forms/signals/src/directive/control_native.ts
new file mode 100644
index 00000000000..40bc63918e1
--- /dev/null
+++ b/packages/forms/signals/src/directive/control_native.ts
@@ -0,0 +1,80 @@
+/**
+ * @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 {ɵControlDirectiveHost as ControlDirectiveHost} from '@angular/core';
+import type {FormField} from './form_field_directive';
+import {getNativeControlValue, setNativeControlValue, setNativeDomProperty} from './native';
+import {observeSelectMutations} from './select';
+import {
+  bindingUpdated,
+  CONTROL_BINDING_NAMES,
+  type ControlBindingKey,
+  createBindings,
+  readFieldStateBindingValue,
+} from './bindings';
+
+export function nativeControlCreate(
+  host: ControlDirectiveHost,
+  parent: FormField<unknown>,
+): () => void {
+  let updateMode = false;
+  const input = parent.nativeFormElement;
+
+  host.listenToDom('input', () => {
+    const state = parent.state();
+    state.setControlValue(getNativeControlValue(input, state.value));
+  });
+
+  host.listenToDom('blur', () => parent.state().markAsTouched());
+
+  parent.registerAsBinding();
+
+  // The native `<select>` tracks its `value` by keeping track of the selected `<option>`.
+  // Therefore if we set the value to an arbitrary string *before* the corresponding option has been
+  // created, the `<select>` will ignore it.
+  //
+  // This means that we need to know when an `<option>` is created, destroyed, or has its `value`
+  // changed so that we can re-sync the `<select>` to the field state's value. We implement this
+  // using a `MutationObserver` that we create to observe `<option>` changes.
+  if (input.tagName === 'SELECT') {
+    observeSelectMutations(
+      input as HTMLSelectElement,
+      () => {
+        // It's not legal to access `parent.state()` until update mode has run, but
+        // `observeSelectMutations` may fire earlier. It's okay to ignore these early notifications
+        // because we'll write `input.value` in that first update pass anyway.
+        if (!updateMode) {
+          return;
+        }
+        input.value = parent.state().controlValue() as string;
+      },
+      parent.destroyRef,
+    );
+  }
+
+  const bindings = createBindings<ControlBindingKey | 'controlValue'>();
+
+  return () => {
+    const state = parent.state();
+    const controlValue = state.controlValue();
+    if (bindingUpdated(bindings, 'controlValue', controlValue)) {
+      setNativeControlValue(input, controlValue);
+    }
+
+    for (const name of CONTROL_BINDING_NAMES) {
+      const value = readFieldStateBindingValue(state, name);
+      if (bindingUpdated(bindings, name, value)) {
+        host.setInputOnDirectives(name, value);
+        if (parent.elementAcceptsNativeProperty(name)) {
+          setNativeDomProperty(parent.renderer, input, name, value as string | number | undefined);
+        }
+      }
+    }
+
+    updateMode = true;
+  };
+}
diff --git a/packages/forms/signals/src/directive/form_field_directive.ts b/packages/forms/signals/src/directive/form_field_directive.ts
new file mode 100644
index 00000000000..65dd8486c43
--- /dev/null
+++ b/packages/forms/signals/src/directive/form_field_directive.ts
@@ -0,0 +1,344 @@
+/**
+ * @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 {
+  computed,
+  DestroyRef,
+  Directive,
+  effect,
+  ElementRef,
+  inject,
+  InjectionToken,
+  Injector,
+  input,
+  Renderer2,
+  type ɵControlDirectiveHost as ControlDirectiveHost,
+  afterRenderEffect,
+  type Signal,
+  ɵRuntimeError as RuntimeError,
+  signal,
+  untracked,
+} from '@angular/core';
+import {type ControlValueAccessor, NG_VALUE_ACCESSOR, NgControl} from '@angular/forms';
+import {InteropNgControl} from '../controls/interop_ng_control';
+import {SignalFormsErrorCode} from '../errors';
+import {SIGNAL_FORMS_CONFIG} from '../field/di';
+import type {FieldNode} from '../field/node';
+import type {FieldTree} from '../api/types';
+import {
+  isNativeFormElement,
+  isNumericFormElement,
+  isTextualFormElement,
+  type NativeFormControl,
+} from './native';
+import {bindingUpdated, type ControlBindingKey, createBindings} from './bindings';
+import {cvaControlCreate} from './control_cva';
+import {customControlCreate} from './control_custom';
+import {nativeControlCreate} from './control_native';
+import {type ValidationError} from '../api/rules';
+
+export const ɵNgFieldDirective: unique symbol = Symbol();
+
+export interface FormFieldBindingOptions {
+  /**
+   * Focuses the binding.
+   *
+   * If not specified, Signal Forms will attempt to focus the host element of the `FormField` when
+   * asked to focus this binding.
+   */
+  readonly focus?: (focusOptions?: FocusOptions) => void;
+
+  /**
+   * Source of parse errors for this binding.
+   */
+  readonly parseErrors?: Signal<ValidationError.WithoutFieldTree[]>;
+}
+
+/**
+ * Lightweight DI token provided by the {@link FormField} directive.
+ *
+ * @category control
+ * @experimental 21.0.0
+ */
+export const FORM_FIELD = new InjectionToken<FormField<unknown>>(
+  typeof ngDevMode !== 'undefined' && ngDevMode ? 'FORM_FIELD' : '',
+);
+
+/**
+ * Binds a form `FieldTree` to a UI control that edits it. A UI control can be one of several things:
+ * 1. A native HTML input or textarea
+ * 2. A signal forms custom control that implements `FormValueControl` or `FormCheckboxControl`
+ * 3. A component that provides a `ControlValueAccessor`. This should only be used for backwards
+ *    compatibility with reactive forms. Prefer options (1) and (2).
+ *
+ * This directive has several responsibilities:
+ * 1. Two-way binds the field state's value with the UI control's value
+ * 2. Binds additional forms related state on the field state to the UI control (disabled, required, etc.)
+ * 3. Relays relevant events on the control to the field state (e.g. marks touched on blur)
+ * 4. Provides a fake `NgControl` that implements a subset of the features available on the
+ *    reactive forms `NgControl`. This is provided to improve interoperability with controls
+ *    designed to work with reactive forms. It should not be used by controls written for signal
+ *    forms.
+ *
+ * @category control
+ * @experimental 21.0.0
+ */
+@Directive({
+  selector: '[formField]',
+  exportAs: 'formField',
+  providers: [
+    {provide: FORM_FIELD, useExisting: FormField},
+    {provide: NgControl, useFactory: () => inject(FormField).interopNgControl},
+  ],
+})
+export class FormField<T> {
+  readonly fieldTree = input.required<FieldTree<T>>({alias: 'formField'});
+
+  /** @internal */
+  readonly renderer = inject(Renderer2);
+
+  /** @internal */
+  readonly destroyRef = inject(DestroyRef);
+
+  /**
+   * `FieldState` for the currently bound field.
+   */
+  readonly state = computed(() => this.fieldTree()());
+
+  /**
+   * The node injector for the element this field binding.
+   */
+  readonly injector = inject(Injector);
+
+  /**
+   * The DOM element hosting this field binding.
+   */
+  readonly element = inject<ElementRef<HTMLElement>>(ElementRef).nativeElement;
+
+  // Compute some helper booleans about the type of element we're sitting on.
+  private readonly elementIsNativeFormElement = isNativeFormElement(this.element);
+  private readonly elementAcceptsNumericValues = isNumericFormElement(this.element);
+  private readonly elementAcceptsTextualValues = isTextualFormElement(this.element);
+
+  /**
+   * Utility that casts `this.element` to `NativeFormControl` to avoid repeated type guards. Only
+   * safe to access when `elementIsNativeFormElement` is true.
+   *
+   * @internal
+   */
+  readonly nativeFormElement: NativeFormControl = (this.elementIsNativeFormElement
+    ? this.element
+    : undefined) as NativeFormControl;
+
+  /**
+   * Current focus implementation, set by `registerAsBinding`.
+   */
+  private focuser = (options?: FocusOptions) => this.element.focus(options);
+
+  /** Any `ControlValueAccessor` instances provided on the host element. */
+  private readonly controlValueAccessors = inject(NG_VALUE_ACCESSOR, {optional: true, self: true});
+
+  private readonly config = inject(SIGNAL_FORMS_CONFIG, {optional: true});
+
+  private readonly parseErrorsSource = signal<
+    Signal<ValidationError.WithoutFieldTree[]> | undefined
+  >(undefined);
+
+  /** A lazily instantiated fake `NgControl`. */
+  private _interopNgControl: InteropNgControl | undefined;
+
+  /** Lazily instantiates a fake `NgControl` for this form field. */
+  protected get interopNgControl(): InteropNgControl {
+    return (this._interopNgControl ??= new InteropNgControl(this.state));
+  }
+
+  /** @internal */
+  readonly parseErrors = computed<ValidationError.WithFormField[]>(
+    () =>
+      this.parseErrorsSource()?.().map((err) => ({
+        ...err,
+        fieldTree: untracked(this.fieldTree),
+        formField: this as FormField<unknown>,
+      })) ?? [],
+  );
+
+  /** Errors associated with this form field. */
+  readonly errors = computed(() =>
+    this.state()
+      .errors()
+      .filter((err) => !err.formField || err.formField === this),
+  );
+
+  /** Whether this `FormField` has been registered as a binding on its associated `FieldState`. */
+  private isFieldBinding = false;
+
+  /**
+   * A `ControlValueAccessor`, if configured, for the host component.
+   *
+   * @internal
+   */
+  get controlValueAccessor(): ControlValueAccessor | undefined {
+    return this.controlValueAccessors?.[0] ?? this.interopNgControl?.valueAccessor ?? undefined;
+  }
+
+  /**
+   * Creates an `afterRenderEffect` that applies the configured class bindings to the host element
+   * if needed.
+   */
+  private installClassBindingEffect(): void {
+    const classes = Object.entries(this.config?.classes ?? {}).map(
+      ([className, computation]) =>
+        [className, computed(() => computation(this as FormField<unknown>))] as const,
+    );
+    if (classes.length === 0) {
+      return;
+    }
+
+    // If we have class bindings to apply, set up an afterRenderEffect to apply them.
+    const bindings = createBindings<string>();
+    afterRenderEffect(
+      {
+        write: () => {
+          for (const [className, computation] of classes) {
+            const active = computation();
+            if (bindingUpdated(bindings, className, active)) {
+              if (active) {
+                this.renderer.addClass(this.element, className);
+              } else {
+                this.renderer.removeClass(this.element, className);
+              }
+            }
+          }
+        },
+      },
+      {injector: this.injector},
+    );
+  }
+
+  /**
+   * Focuses this field binding.
+   *
+   * By default, this will focus the host DOM element. However, custom `FormUiControl`s can
+   * implement custom focusing behavior.
+   */
+  focus(options?: FocusOptions): void {
+    this.focuser(options);
+  }
+
+  /**
+   * Registers this `FormField` as a binding on its associated `FieldState`.
+   *
+   * This method should be called at most once for a given `FormField`. A `FormField` placed on a
+   * custom control (`FormUiControl`) automatically registers that custom control as a binding.
+   */
+  registerAsBinding(bindingOptions?: FormFieldBindingOptions): void {
+    if (this.isFieldBinding) {
+      throw new RuntimeError(
+        SignalFormsErrorCode.BINDING_ALREADY_REGISTERED,
+        ngDevMode && 'FormField already registered as a binding',
+      );
+    }
+    this.isFieldBinding = true;
+
+    this.installClassBindingEffect();
+
+    if (bindingOptions?.focus) {
+      this.focuser = bindingOptions.focus;
+    }
+
+    if (bindingOptions?.parseErrors) {
+      this.parseErrorsSource.set(bindingOptions.parseErrors);
+    }
+
+    // Register this control on the field state it is currently bound to. We do this at the end of
+    // initialization so that it only runs if we are actually syncing with this control
+    // (as opposed to just passing the field state through to its `formField` input).
+    effect(
+      (onCleanup) => {
+        const fieldNode = this.state() as unknown as FieldNode;
+        fieldNode.nodeState.formFieldBindings.update((controls) => [
+          ...controls,
+          this as FormField<unknown>,
+        ]);
+        onCleanup(() => {
+          fieldNode.nodeState.formFieldBindings.update((controls) =>
+            controls.filter((c) => c !== this),
+          );
+        });
+      },
+      {injector: this.injector},
+    );
+  }
+
+  /**
+   * The presence of this symbol tells the template type-checker that this directive is a control
+   * directive and should be type-checked as such. We don't use the `ɵngControlCreate` method below
+   * as it's marked internal and removed from the public API. A symbol is used instead to avoid
+   * polluting the public API with the marker.
+   */
+  readonly [ɵNgFieldDirective]!: true;
+
+  /**
+   * Internal control directive creation lifecycle hook.
+   *
+   * The presence of this method tells the compiler to install `ɵɵControlFeature`, which will
+   * cause this directive to be recognized as a control directive by the `ɵcontrolCreate` and
+   * `ɵcontrol` instructions.
+   *
+   * @internal */
+  ɵngControlCreate(host: ControlDirectiveHost<'formField'>): void {
+    if (host.hasPassThrough) {
+      return;
+    }
+
+    if (this.controlValueAccessor) {
+      this.ɵngControlUpdate = cvaControlCreate(host, this as FormField<unknown>);
+    } else if (host.customControl) {
+      this.ɵngControlUpdate = customControlCreate(host, this as FormField<unknown>);
+    } else if (this.elementIsNativeFormElement) {
+      this.ɵngControlUpdate = nativeControlCreate(host, this as FormField<unknown>);
+    } else {
+      throw new RuntimeError(
+        SignalFormsErrorCode.INVALID_FIELD_DIRECTIVE_HOST,
+        ngDevMode &&
+          `${host.descriptor} is an invalid [formField] directive host. The host must be a native form control ` +
+            `(such as <input>', '<select>', or '<textarea>') or a custom form control with a 'value' or ` +
+            `'checked' model.`,
+      );
+    }
+  }
+
+  /** @internal */
+  ɵngControlUpdate: (() => void) | undefined;
+
+  /** @internal */
+  elementAcceptsNativeProperty<K extends ControlBindingKey>(
+    key: K,
+  ): key is K &
+    ('min' | 'max' | 'minLength' | 'maxLength' | 'disabled' | 'required' | 'readonly' | 'name') {
+    if (!this.elementIsNativeFormElement) {
+      return false;
+    }
+
+    switch (key) {
+      case 'min':
+      case 'max':
+        return this.elementAcceptsNumericValues;
+      case 'minLength':
+      case 'maxLength':
+        return this.elementAcceptsTextualValues;
+      case 'disabled':
+      case 'required':
+      case 'readonly':
+      case 'name':
+        return true;
+      default:
+        return false;
+    }
+  }
+}
diff --git a/packages/forms/signals/src/directive/native.ts b/packages/forms/signals/src/directive/native.ts
new file mode 100644
index 00000000000..b9f8c8bd3ee
--- /dev/null
+++ b/packages/forms/signals/src/directive/native.ts
@@ -0,0 +1,191 @@
+/**
+ * @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 Renderer2, untracked} from '@angular/core';
+
+/**
+ * Supported native control element types.
+ *
+ * The `type` property of a {@link HTMLTextAreaElement} should always be 'textarea', but the
+ * TypeScript DOM API type definition lacks this detail, so we include it here.
+ *
+ * https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement/type
+ */
+export type NativeFormControl =
+  | HTMLInputElement
+  | HTMLSelectElement
+  | (HTMLTextAreaElement & {type: 'textarea'});
+
+export function isNativeFormElement(element: HTMLElement): element is NativeFormControl {
+  return (
+    element.tagName === 'INPUT' || element.tagName === 'SELECT' || element.tagName === 'TEXTAREA'
+  );
+}
+
+export function isNumericFormElement(element: HTMLElement): boolean {
+  if (element.tagName !== 'INPUT') {
+    return false;
+  }
+
+  const type = (element as HTMLInputElement).type;
+  return (
+    type === 'date' ||
+    type === 'datetime-local' ||
+    type === 'month' ||
+    type === 'number' ||
+    type === 'range' ||
+    type === 'time' ||
+    type === 'week'
+  );
+}
+
+export function isTextualFormElement(element: HTMLElement): boolean {
+  return element.tagName === 'INPUT' || element.tagName === 'TEXTAREA';
+}
+
+/**
+ * Returns the value from a native control element.
+ *
+ * @param element The native control element.
+ * @param currentValue A function that returns the current value from the control's corresponding
+ *   field state.
+ *
+ * The type of the returned value depends on the `type` property of the control, and will attempt to
+ * match the current value's type. For example, the value of `<input type="number">` can be read as
+ * a `string` or a `number`. If the current value is a `number`, then this will return a `number`.
+ * Otherwise, this will return the value as a `string`.
+ */
+export function getNativeControlValue(
+  element: NativeFormControl,
+  currentValue: () => unknown,
+): unknown {
+  // Special cases for specific input types.
+  switch (element.type) {
+    case 'checkbox':
+      return element.checked;
+    case 'number':
+    case 'range':
+    case 'datetime-local':
+      // We can read a `number` or a `string` from this input type. Prefer whichever is consistent
+      // with the current type.
+      if (typeof untracked(currentValue) === 'number') {
+        return element.valueAsNumber;
+      }
+      break;
+    case 'date':
+    case 'month':
+    case 'time':
+    case 'week':
+      // We can read a `Date | null`, `number`, or `string` from this input type. Prefer whichever
+      // is consistent with the current type.
+      const value = untracked(currentValue);
+      if (value === null || value instanceof Date) {
+        return element.valueAsDate;
+      } else if (typeof value === 'number') {
+        return element.valueAsNumber;
+      }
+      break;
+  }
+
+  // Default to reading the value as a string.
+  return element.value;
+}
+
+/**
+ * Sets a native control element's value.
+ *
+ * @param element The native control element.
+ * @param value The new value to set.
+ */
+export function setNativeControlValue(element: NativeFormControl, value: unknown) {
+  // Special cases for specific input types.
+  switch (element.type) {
+    case 'checkbox':
+      element.checked = value as boolean;
+      return;
+    case 'radio':
+      // Although HTML behavior is to clear the input already, we do this just in case. It seems
+      // like it might be necessary in certain environments (e.g. Domino).
+      element.checked = value === element.value;
+      return;
+    case 'number':
+    case 'range':
+    case 'datetime-local':
+      // This input type can receive a `number` or a `string`.
+      if (typeof value === 'number') {
+        setNativeNumberControlValue(element, value);
+        return;
+      }
+      break;
+    case 'date':
+    case 'month':
+    case 'time':
+    case 'week':
+      // This input type can receive a `Date | null` or a `number` or a `string`.
+      if (value === null || value instanceof Date) {
+        element.valueAsDate = value;
+        return;
+      } else if (typeof value === 'number') {
+        setNativeNumberControlValue(element, value);
+        return;
+      }
+  }
+
+  // Default to setting the value as a string.
+  element.value = value as string;
+}
+
+/** Writes a value to a native <input type="number">. */
+export function setNativeNumberControlValue(element: HTMLInputElement, value: number) {
+  // Writing `NaN` causes a warning in the console, so we instead write `''`.
+  // This allows the user to safely use `NaN` as a number value that means "clear the input".
+  if (isNaN(value)) {
+    element.value = '';
+  } else {
+    element.valueAsNumber = value;
+  }
+}
+
+/**
+ * Updates the native DOM property on the given node.
+ *
+ * @param key The control binding key (identifies the property type, e.g. disabled, required).
+ * @param name The DOM attribute/property name.
+ * @param value The new value for the property.
+ */
+export function setNativeDomProperty(
+  renderer: Renderer2,
+  element: NativeFormControl,
+  name: 'name' | 'disabled' | 'required' | 'readonly' | 'min' | 'max' | 'minLength' | 'maxLength',
+  value: string | number | undefined,
+) {
+  switch (name) {
+    case 'name':
+      renderer.setAttribute(element, name, value as string);
+      break;
+    case 'disabled':
+    case 'readonly':
+    case 'required':
+      if (value) {
+        renderer.setAttribute(element, name, '');
+      } else {
+        renderer.removeAttribute(element, name);
+      }
+      break;
+    case 'max':
+    case 'min':
+    case 'minLength':
+    case 'maxLength':
+      if (value !== undefined) {
+        renderer.setAttribute(element, name, value.toString());
+      } else {
+        renderer.removeAttribute(element, name);
+      }
+      break;
+  }
+}
diff --git a/packages/forms/signals/src/directive/select.ts b/packages/forms/signals/src/directive/select.ts
new file mode 100644
index 00000000000..868ce26edb7
--- /dev/null
+++ b/packages/forms/signals/src/directive/select.ts
@@ -0,0 +1,80 @@
+/**
+ * @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 {DestroyRef} from '@angular/core';
+
+/**
+ * Creates a `MutationObserver` to observe changes to the available `<option>`s for this select.
+ *
+ * @param select The native `<select>` element to observe.
+ * @param lView The `LView` that contains the native form control.
+ * @param tNode The `TNode` of the native form control.
+ * @returns The newly created `MutationObserver`.
+ */
+export function observeSelectMutations(
+  select: HTMLSelectElement,
+  onMutation: () => void,
+  destroyRef: DestroyRef,
+): void {
+  if (typeof MutationObserver !== 'function') {
+    // Observing mutations is best-effort.
+    return;
+  }
+
+  const observer = new MutationObserver((mutations) => {
+    if (mutations.some((m) => isRelevantSelectMutation(m))) {
+      onMutation();
+    }
+  });
+  observer.observe(select, {
+    attributes: true,
+    attributeFilter: ['value'],
+    // We watch the character data, because an `<option>` with no explicit `value` property set uses
+    // its text content as its value.
+    // (See https://developer.mozilla.org/en-US/docs/Web/API/HTMLOptionElement/value)
+    characterData: true,
+    childList: true,
+    subtree: true,
+  });
+  destroyRef.onDestroy(() => observer.disconnect());
+}
+
+/**
+ * Checks if a given mutation record is relevant for resyncing a <select>.
+ * In general its relevant if:
+ * - Non comment content of the select changed
+ * - The value attribute of an option changed.
+ */
+function isRelevantSelectMutation(mutation: MutationRecord) {
+  // Consider changes that may add / remove options, or change their text content.
+  if (mutation.type === 'childList' || mutation.type === 'characterData') {
+    // If the target element is a comment its not relevant.
+    if (mutation.target instanceof Comment) {
+      return false;
+    }
+    // Otherwise if any non-comment nodes were added / removed it is relevant.
+    for (const node of mutation.addedNodes) {
+      if (!(node instanceof Comment)) {
+        return true;
+      }
+    }
+    for (const node of mutation.removedNodes) {
+      if (!(node instanceof Comment)) {
+        return true;
+      }
+    }
+    // Otherwise its not relevant.
+    return false;
+  }
+  // If the value attribute of an option changed, its relevant.
+  if (mutation.type === 'attributes' && mutation.target instanceof HTMLOptionElement) {
+    return true;
+  }
+  // Everything else is not relevant.
+  return false;
+}
diff --git a/packages/forms/signals/src/errors.ts b/packages/forms/signals/src/errors.ts
index 8d636993d86..96f77455414 100644
--- a/packages/forms/signals/src/errors.ts
+++ b/packages/forms/signals/src/errors.ts
@@ -26,4 +26,5 @@ export const enum SignalFormsErrorCode {
   COMPAT_NO_CHILDREN = 1911,
   MANAGED_METADATA_LAZY_CREATION = 1912,
   BINDING_ALREADY_REGISTERED = 1913,
+  INVALID_FIELD_DIRECTIVE_HOST = 1914,
 }
diff --git a/packages/forms/signals/src/field/node.ts b/packages/forms/signals/src/field/node.ts
index 5b6c8bc9724..f324b4bb99e 100644
--- a/packages/forms/signals/src/field/node.ts
+++ b/packages/forms/signals/src/field/node.ts
@@ -7,7 +7,7 @@
  */
 
 import {computed, linkedSignal, type Signal, untracked, type WritableSignal} from '@angular/core';
-import type {FormField} from '../api/form_field_directive';
+import type {FormField} from '../directive/form_field_directive';
 import {
   MAX,
   MAX_LENGTH,
diff --git a/packages/forms/signals/src/field/state.ts b/packages/forms/signals/src/field/state.ts
index 34a6e33b358..347f4aa2d21 100644
--- a/packages/forms/signals/src/field/state.ts
+++ b/packages/forms/signals/src/field/state.ts
@@ -7,7 +7,7 @@
  */
 
 import {computed, signal, Signal} from '@angular/core';
-import type {FormField} from '../api/form_field_directive';
+import type {FormField} from '../directive/form_field_directive';
 import type {Debouncer, DisabledReason} from '../api/types';
 import {DEBOUNCER} from './debounce';
 import type {FieldNode} from './node';