refactor(forms): address review feedback on select[multiple] prototype

- Remove $any() cast from the test — the TCB already enforces string[]
  for select[multiple], so no workaround is needed
- Extract the CONTROL_BINDING_NAMES update loop into a shared
  applyControlStateBindings() helper in bindings.ts, used by both the
  native and select-multiple control paths
- Throw a RuntimeError (code 1921) in setSelectMultipleControlValue when
  a non-array value is passed; the guard is unconditional so production
  never silently corrupts the selection state
- Move the selectedOptions fallback comment to the fallback branch where
  it actually explains the divergence

Author: sonukapoor

packages/forms/signals/src/directive/bindings.ts

@@ -82,3 +82,21 @@ export function bindingUpdated<TKey extends string>(
   }
   return false;
 }
+
+/**
+ * Iterates over all control binding names, computes each value from field state, and calls
+ * `onUpdate` for any binding whose value has changed since the last call. Shared by native
+ * and select-multiple control implementations to avoid duplicating the update loop.
+ */
+export function applyControlStateBindings(
+  bindings: {[key: string]: unknown},
+  state: ReadonlyFieldState<unknown>,
+  onUpdate: (name: ControlBindingKey, value: unknown) => void,
+): void {
+  for (const name of CONTROL_BINDING_NAMES) {
+    const value = readFieldStateBindingValue(state, name);
+    if (bindingUpdated(bindings, name, value)) {
+      onUpdate(name, value);
+    }
+  }
+}

packages/forms/signals/src/directive/control_native.ts

@@ -13,10 +13,9 @@ import {
 import type {ValidationError} from '../api/rules';
 import {createParser} from '../util/parser';
 import {
+  applyControlStateBindings,
   bindingUpdated,
-  CONTROL_BINDING_NAMES,
   createBindings,
-  readFieldStateBindingValue,
   type ControlBindingKey,
 } from './bindings';
 import type {FormField} from './form_field';
@@ -96,15 +95,12 @@ export function nativeControlCreate(
       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);
-        }
+    applyControlStateBindings(bindings, state, (name, value) => {
+      host.setInputOnDirectives(name, value);
+      if (parent.elementAcceptsNativeProperty(name)) {
+        setNativeDomProperty(parent.renderer, input, name, value as string | number | undefined);
       }
-    }
+    });
 
     updateMode = true;
   };

packages/forms/signals/src/directive/control_select_multiple.ts

@@ -5,12 +5,15 @@
  * 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 {
+  ɵRuntimeError as RuntimeError,
+  type ɵControlDirectiveHost as ControlDirectiveHost,
+} from '@angular/core';
+import {RuntimeErrorCode} from '../errors';
+import {
+  applyControlStateBindings,
   bindingUpdated,
-  CONTROL_BINDING_NAMES,
   createBindings,
-  readFieldStateBindingValue,
   type ControlBindingKey,
 } from './bindings';
 import type {FormField} from './form_field';
@@ -51,15 +54,12 @@ export function selectMultipleControlCreate(
       setSelectMultipleControlValue(select, 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, select, name, value as string | number | undefined);
-        }
+    applyControlStateBindings(bindings, state, (name, value) => {
+      host.setInputOnDirectives(name, value);
+      if (parent.elementAcceptsNativeProperty(name)) {
+        setNativeDomProperty(parent.renderer, select, name, value as string | number | undefined);
       }
-    }
+    });
 
     updateMode = true;
   };
@@ -76,6 +76,9 @@ function getSelectMultipleControlValue(select: HTMLSelectElement): string[] {
     return selected;
   }
 
+  // `selectedOptions` is not available in some environments (e.g. older jsdom versions used
+  // in Node.js tests). Fall back to iterating the full `options` list and filtering by the
+  // `selected` flag.
   for (let i = 0; i < select.options.length; i++) {
     const option = select.options[i];
     if (option.selected) {
@@ -87,7 +90,15 @@ function getSelectMultipleControlValue(select: HTMLSelectElement): string[] {
 }
 
 function setSelectMultipleControlValue(select: HTMLSelectElement, value: unknown): void {
-  const selectedValues = new Set(Array.isArray(value) ? value : []);
+  if (!Array.isArray(value)) {
+    throw new RuntimeError(
+      RuntimeErrorCode.SELECT_MULTIPLE_NON_ARRAY_VALUE,
+      ngDevMode &&
+        `Expected an array value for select[multiple], but got ${typeof value}. ` +
+          `Bind a signal holding a string array: e.g. form(signal<string[]>([]))`,
+    );
+  }
+  const selectedValues = new Set<string>(value);
   for (let i = 0; i < select.options.length; i++) {
     const option = select.options[i];
     option.selected = selectedValues.has(option.value);

packages/forms/signals/src/errors.ts

@@ -30,4 +30,5 @@ export const enum RuntimeErrorCode {
   MISSING_SUBMIT_ACTION = 1915,
   RENDERED_HIDDEN_FIELD = 1916,
   UNSUPPORTED_FEATURE = 1920,
+  SELECT_MULTIPLE_NON_ARRAY_VALUE = 1921,
 }

packages/forms/signals/test/web/form_field.spec.ts

@@ -3927,7 +3927,7 @@ describe('field directive', () => {
     @Component({
       imports: [FormField],
       template: `
-        <select #select multiple [formField]="$any(f)">
+        <select #select multiple [formField]="f">
           <option value="one">One</option>
           <option value="two">Two</option>
           <option value="three">Three</option>