fix(core): ensure custom controls resolve transitive host directives

Custom controls can be modeled using a set of host directives to alias
and expose value and valueChange (or checked/checkedChange) bindings,
as well as native attributes like disabled.

This commit updates initializeCustomControlStatus to correctly identify
host components using mapped inputs/outputs, even when those inputs are
exposed via transitive host directives. It also updates
customControlHasInput so that the custom control presence check correctly
evaluates the exposed inputs across all applied host directives, caching
the result to optimize performance on hot code paths.

Author: alxhub

packages/core/src/render3/definition.ts

@@ -639,6 +639,7 @@ function getNgDirectiveDef<T>(directiveDefinition: DirectiveDefinition<T>): Dire
     resolveHostDirectives: null,
     hostDirectives: null,
     controlDef: null,
+    signalFormsInputPresence: null,
     inputs: parseAndConvertInputsForDefinition(directiveDefinition.inputs, declaredInputs),
     outputs: parseAndConvertOutputsForDefinition(directiveDefinition.outputs),
     debugInfo: null,

packages/core/src/render3/instructions/control.ts

@@ -21,8 +21,9 @@ import {
 } from '../state';
 import {getNativeByTNode} from '../util/view_utils';
 import {debugStringifyTypeForError} from '../util/stringify_utils';
-import {listenToOutput} from '../view/directive_outputs';
+import {listenToDirectiveOutput} from '../view/directive_outputs';
 import {listenToDomEvent, wrapListener} from '../view/listeners';
+import {setDirectiveInput} from './shared';
 import {writeToDirectiveInput} from './write_to_directive_input';
 
 /**
@@ -118,20 +119,11 @@ class ControlDirectiveHostImpl implements ControlDirectiveHost {
   }
 
   listenToCustomControlOutput(outputName: string, callback: (event: Event) => void): void {
-    if (
-      !hasOutput(
-        this.tView.data[this.tNode.customControlIndex] as DirectiveDef<unknown>,
-        outputName,
-      )
-    ) {
-      return;
-    }
-
-    listenToOutput(
+    const directiveDef = this.tView.data[this.tNode.customControlIndex] as DirectiveDef<unknown>;
+    listenToDirectiveOutput(
       this.tNode,
       this.lView,
-      this.tNode.customControlIndex,
-      outputName,
+      directiveDef,
       outputName,
       wrapListener(this.tNode, this.lView, callback),
     );
@@ -140,11 +132,11 @@ class ControlDirectiveHostImpl implements ControlDirectiveHost {
   listenToCustomControlModel(listener: (value: unknown) => void): void {
     const modelName =
       this.tNode.flags & TNodeFlags.isFormValueControl ? 'valueChange' : 'checkedChange';
-    listenToOutput(
+    const directiveDef = this.tView.data[this.tNode.customControlIndex] as DirectiveDef<unknown>;
+    listenToDirectiveOutput(
       this.tNode,
       this.lView,
-      this.tNode.customControlIndex,
-      modelName,
+      directiveDef,
       modelName,
       wrapListener(this.tNode, this.lView, listener),
     );
@@ -203,21 +195,78 @@ class ControlDirectiveHostImpl implements ControlDirectiveHost {
   }
 
   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);
+    setDirectiveInput(this.tNode, this.tView, this.lView, directiveDef, 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;
+    const presence = (directiveDef.signalFormsInputPresence ??=
+      this._buildCustomControlInputCache(directiveDef));
+    return presence[inputName] === true;
+  }
+
+  private _buildCustomControlInputCache(directiveDef: DirectiveDef<unknown>): {
+    [key: string]: boolean;
+  } {
+    const cache: {[key: string]: boolean} = {};
+
+    // First, add all inputs defined directly on the custom control directive.
+    for (const key in directiveDef.inputs) {
+      cache[key] = true;
+    }
+
+    // Next, gather inputs exposed by host directives recursively.
+    if (directiveDef.hostDirectives !== null) {
+      const queue = [...directiveDef.hostDirectives];
+      while (queue.length > 0) {
+        const hostDir = queue.shift()!;
+        if (typeof hostDir !== 'function') {
+          // HostDirectiveDef object
+          for (const key in hostDir.inputs) {
+            cache[hostDir.inputs[key]] = true;
+          }
+          const hostDirectives = getHostDirectives(hostDir.directive);
+          if (hostDirectives !== null) {
+            queue.push(...hostDirectives);
+          }
+          continue;
+        }
+
+        // Factory function returning HostDirectiveConfig[]
+        for (const config of hostDir()) {
+          if (typeof config === 'function') {
+            continue;
+          }
+          if (config.inputs) {
+            for (let i = 0; i < config.inputs.length; i += 2) {
+              const exposedName = config.inputs[i + 1] || config.inputs[i];
+              cache[exposedName] = true;
+            }
+          }
+          const hostDirectives = getHostDirectives(config.directive);
+          if (hostDirectives !== null) {
+            queue.push(...hostDirectives);
+          }
+        }
+      }
+    }
+
+    return cache;
   }
 }
 
+function getHostDirectives(directiveType: any): readonly any[] | null {
+  if (typeof directiveType === 'function' && 'ɵdir' in directiveType) {
+    return (directiveType as any).ɵdir.hostDirectives ?? null;
+  }
+  return null;
+}
+
 function initializeControlFirstCreatePass(tView: TView, tNode: TNode, lView: LView): void {
   ngDevMode && assertFirstCreatePass(tView);
 
@@ -261,6 +310,11 @@ function initializeControlFirstCreatePass(tView: TView, tNode: TNode, lView: LVi
 function initializeCustomControlStatus(tView: TView, tNode: TNode): void {
   for (let i = tNode.directiveStart; i < tNode.directiveEnd; i++) {
     const directiveDef = tView.data[i] as DirectiveDef<unknown>;
+    // Host directives shouldn't be matched directly since their types are not in
+    // `directiveToIndex`. We match them through their host component's `hostDirectiveInputs` instead.
+    if (tNode.directiveToIndex && !tNode.directiveToIndex.has(directiveDef.type)) {
+      continue;
+    }
     if (hasModelInput(directiveDef, 'value')) {
       tNode.flags |= TNodeFlags.isFormValueControl;
       tNode.customControlIndex = i;
@@ -272,6 +326,50 @@ function initializeCustomControlStatus(tView: TView, tNode: TNode): void {
       return;
     }
   }
+
+  if (
+    tNode.hostDirectiveInputs !== null &&
+    tNode.hostDirectiveOutputs !== null &&
+    tNode.directiveToIndex !== null
+  ) {
+    const checkModel = (modelName: string, flag: TNodeFlags) => {
+      const inputs = tNode.hostDirectiveInputs![modelName];
+      const outputs = tNode.hostDirectiveOutputs![modelName + 'Change'];
+      if (!inputs || !outputs) {
+        return false;
+      }
+
+      for (let i = 0; i < inputs.length; i += 2) {
+        const inputIndex = inputs[i] as number;
+        for (let j = 0; j < outputs.length; j += 2) {
+          const outputIndex = outputs[j] as number;
+          // TODO: invert control flow logic here.
+          if (inputIndex !== outputIndex) {
+            continue;
+          }
+          for (const data of tNode.directiveToIndex!.values()) {
+            if (!Array.isArray(data)) {
+              continue;
+            }
+            const [hostIndex, start, end] = data;
+            if (inputIndex >= start && inputIndex <= end) {
+              tNode.flags |= flag;
+              tNode.customControlIndex = hostIndex;
+              return true;
+            }
+          }
+        }
+      }
+      return false;
+    };
+
+    if (checkModel('value', TNodeFlags.isFormValueControl)) {
+      return;
+    }
+    if (checkModel('checked', TNodeFlags.isFormCheckboxControl)) {
+      return;
+    }
+  }
 }
 
 /**

packages/core/src/render3/interfaces/definition.ts

@@ -264,6 +264,12 @@ export interface DirectiveDef<T> {
 
   controlDef: ControlDirectiveDef | null;
 
+  /**
+   * Cache of inputs that this custom control directive covers,
+   * used by the signal forms system.
+   */
+  signalFormsInputPresence: Record<string, boolean> | null;
+
   setInput:
     | (<U extends T>(
         this: DirectiveDef<U>,

packages/core/src/render3/view/directive_outputs.ts

@@ -42,7 +42,7 @@ export function createOutputListener(
 }
 
 /** Listens to an output on a specific directive. */
-function listenToDirectiveOutput(
+export function listenToDirectiveOutput(
   tNode: TNode,
   lView: LView,
   target: DirectiveDef<unknown>,

packages/core/test/bundling/create_component/bundle.golden_symbols.json

@@ -411,6 +411,7 @@
       "getFirstLContainer",
       "getFirstNativeNode",
       "getGlobalLocale",
+      "getHostDirectives",
       "getInheritedInjectableDef",
       "getInitialLViewFlagsFromDef",
       "getInjectFlag",
@@ -553,6 +554,7 @@
       "leaveViewLight",
       "leavingNodes",
       "linkTNodeInTView",
+      "listenToDirectiveOutput",
       "listenToDomEvent",
       "listenToOutput",
       "locateDirectiveOrProvider",

packages/core/test/bundling/forms_reactive/bundle.golden_symbols.json

@@ -599,6 +599,7 @@
       "getFirstLContainer",
       "getFirstNativeNode",
       "getGlobalLocale",
+      "getHostDirectives",
       "getInheritedInjectableDef",
       "getInitialLViewFlagsFromDef",
       "getInjectFlag",
@@ -803,6 +804,7 @@
       "leavingNodes",
       "lengthOrSize",
       "linkTNodeInTView",
+      "listenToDirectiveOutput",
       "listenToDomEvent",
       "listenToOutput",
       "listenerInternal",
@@ -970,6 +972,7 @@
       "setCurrentQueryIndex",
       "setCurrentTNode",
       "setCurrentTNodeAsNotParent",
+      "setDirectiveInput",
       "setDirectiveInputsWhichShadowsStyling",
       "setDisabledStateDefault",
       "setDocument",

packages/core/test/bundling/forms_template_driven/bundle.golden_symbols.json

@@ -595,6 +595,7 @@
       "getFirstLContainer",
       "getFirstNativeNode",
       "getGlobalLocale",
+      "getHostDirectives",
       "getInheritedInjectableDef",
       "getInitialLViewFlagsFromDef",
       "getInjectFlag",
@@ -798,6 +799,7 @@
       "leavingNodes",
       "lengthOrSize",
       "linkTNodeInTView",
+      "listenToDirectiveOutput",
       "listenToDomEvent",
       "listenToOutput",
       "listenerInternal",
@@ -968,6 +970,7 @@
       "setCurrentQueryIndex",
       "setCurrentTNode",
       "setCurrentTNodeAsNotParent",
+      "setDirectiveInput",
       "setDirectiveInputsWhichShadowsStyling",
       "setDisabledStateDefault",
       "setDocument",