refactor(forms): reduce boilerplate needed to define custom controls

leonsenft · thePunderWoman · commit e682f00e2909 · 2025-11-17T17:41:02.000Z
An early piece of feedback received regarding custom controls hosted on native inputs was that they required a lot of boilerplate to bind `FieldState` properties. Each property required an input to accept the property, and a host binding to forward it to the native control. (cherry picked from commit c727df5)
diff --git a/packages/core/src/render3/instructions/control.ts b/packages/core/src/render3/instructions/control.ts
@@ -110,6 +110,10 @@ export function ɵɵcontrol<T>(value: T, sanitizer?: SanitizerFn | null): void {
   nextBindingIndex();
 }
 
+/** A bitmask used to check if a TNode represents a native or custom form control. */
+const HAS_CONTROL_MASK = /* @__PURE__ */ (() =>
+  TNodeFlags.isNativeControl | TNodeFlags.isFormValueControl | TNodeFlags.isFormCheckboxControl)();
+
 function getControlDirectiveFirstCreatePass<T>(
   tView: TView,
   tNode: TNode,
@@ -143,28 +147,31 @@ function getControlDirectiveFirstCreatePass<T>(
 
   if (isComponentHost(tNode)) {
     const componentDef = tView.data[componentIndex] as ComponentDef<unknown>;
-    // TODO: should we check that any additional field state inputs are signal based?
     if (hasModelInput(componentDef, 'value')) {
       tNode.flags |= TNodeFlags.isFormValueControl;
-      return control;
     } else if (hasModelInput(componentDef, 'checked')) {
       tNode.flags |= TNodeFlags.isFormCheckboxControl;
-      return control;
     }
+    // Continue on to check if the host element is also a native control.
   }
 
-  if (control.ɵinteropControl) {
+  // Only check for an interop control if we haven't already found a custom one.
+  if (!(tNode.flags & HAS_CONTROL_MASK) && control.ɵinteropControl) {
     tNode.flags |= TNodeFlags.isInteropControl;
     return control;
   }
 
   if (isNativeControl(tNode)) {
+    tNode.flags |= TNodeFlags.isNativeControl;
     if (isNumericInput(tNode)) {
       tNode.flags |= TNodeFlags.isNativeNumericControl;
     }
     if (isTextControl(tNode)) {
       tNode.flags |= TNodeFlags.isNativeTextControl;
     }
+  }
+
+  if (tNode.flags & HAS_CONTROL_MASK) {
     return control;
   }
 
@@ -454,6 +461,14 @@ function updateCustomControl(
     const inputName = CONTROL_BINDING_NAMES[key];
     maybeUpdateInput(componentDef, component, bindings, state, key, inputName);
   }
+
+  // If the host node is a native control, we can bind field state properties to attributes for any
+  // that weren't defined as inputs on the custom control. We can reuse the update path for native
+  // controls since any properties with a corresponding input would have just been checked above,
+  // and thus will appear unchanged.
+  if (tNode.flags & TNodeFlags.isNativeControl) {
+    updateNativeControl(tNode, lView, control);
+  }
 }
 
 /**
diff --git a/packages/core/src/render3/interfaces/node.ts b/packages/core/src/render3/interfaces/node.ts
@@ -131,88 +131,96 @@ export function isLetDeclaration(tNode: TNode): boolean {
  */
 export const enum TNodeFlags {
   /** Bit #1 - This bit is set if the node is a host for any directive (including a component) */
-  isDirectiveHost = 0x1,
+  isDirectiveHost = 1 << 0,
 
   /** Bit #2 - This bit is set if the node has been projected */
-  isProjected = 0x2,
+  isProjected = 1 << 1,
 
   /** Bit #3 - This bit is set if any directive on this node has content queries */
-  hasContentQuery = 0x4,
+  hasContentQuery = 1 << 2,
 
   /** Bit #4 - This bit is set if the node has any "class" inputs */
-  hasClassInput = 0x8,
+  hasClassInput = 1 << 3,
 
   /** Bit #5 - This bit is set if the node has any "style" inputs */
-  hasStyleInput = 0x10,
+  hasStyleInput = 1 << 4,
 
   /** Bit #6 - This bit is set if the node has been detached by i18n */
-  isDetached = 0x20,
+  isDetached = 1 << 5,
 
   /**
    * Bit #7 - This bit is set if the node has directives with host bindings.
    *
    * This flags allows us to guard host-binding logic and invoke it only on nodes
    * that actually have directives with host bindings.
    */
-  hasHostBindings = 0x40,
+  hasHostBindings = 1 << 6,
 
   /**
    * Bit #8 - This bit is set if the node is a located inside skip hydration block.
    */
-  inSkipHydrationBlock = 0x80,
+  inSkipHydrationBlock = 1 << 7,
 
   /**
    * Bit #9 - This bit is set if the node is a start of a set of control flow blocks.
    */
-  isControlFlowStart = 0x100,
+  isControlFlowStart = 1 << 8,
 
   /**
    * Bit #10 - This bit is set if the node is within a set of control flow blocks.
    */
-  isInControlFlow = 0x200,
+  isInControlFlow = 1 << 9,
 
   /**
    * Bit #11 - This bit is set if the node represents a form control.
    *
    * True when the node has an input binding to a `ɵControl` directive (but not also to a custom
    * component).
    */
-  isFormControl = 0x400,
+  isFormControl = 1 << 10,
 
   /**
    * Bit #12 - This bit is set if the node hosts a custom control component.
    *
    * A custom control component's model property is named `value`.
    */
-  isFormValueControl = 0x800,
+  isFormValueControl = 1 << 11,
 
   /**
    * Bit #13 - This bit is set if the node hosts a custom checkbox component.
    *
    * A custom checkbox component's model property is named `checked`.
    */
-  isFormCheckboxControl = 0x1000,
+  isFormCheckboxControl = 1 << 12,
 
   /**
    * Bit #14 - This bit is set if the node hosts an interoperable control implementation.
    *
    * This is used to bind to a `ControlValueAccessor` from `@angular/forms`.
    */
-  isInteropControl = 0x2000,
+  isInteropControl = 1 << 13,
 
   /**
-   * Bit #15 - This bit is set if the node is a native control with a numeric type.
+   * Bit #15 - 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 << 14,
+
+  /**
+   * Bit #16 - 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 = 0x4000,
+  isNativeNumericControl = 1 << 15,
 
   /**
-   * Bit #16 - This bit is set if the node is a native text control.
+   * Bit #17 - 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 = 0x8000,
+  isNativeTextControl = 1 << 16,
 }
 
 /**
diff --git a/packages/forms/signals/test/web/field_directive.spec.ts b/packages/forms/signals/test/web/field_directive.spec.ts
