feat(forms): prototype signal forms support for select[multiple]

Add an initial Signal Forms implementation for <select multiple>.

This prototype (for angular#67563) adds a dedicated runtime path for
multi-select controls and updates Signal Forms type checking so
<select multiple [formField]> is treated as string[] instead of string.

The current scope is intentionally small:
- support native <select multiple>
- synchronize model -> DOM and DOM -> model
- resync correctly when options change
- preserve DOM option order in the emitted value

Not included in this prototype:
- compareWith
- object-valued options / ngValue semantics
- broader selection abstractions

Also adds focused coverage for:
- Signal Forms type-checking of <select multiple>
- runtime synchronization for multi-select controls

Author: sonukapoor

packages/compiler-cli/src/ngtsc/typecheck/test/type_check_block_spec.ts

@@ -2923,6 +2923,14 @@ describe('type check blocks', () => {
       expect(block).toContain('_t2.field = (((this).f));');
     });
 
+    it('should generate a string array field for a multiple select', () => {
+      const block = tcb('<select multiple [formField]="f"></select>', [FieldMock]);
+      expect(block).toContain('var _t1 = null! as string[];');
+      expect(block).toContain('_t1 = ((this).f)().value();');
+      expect(block).toContain('var _t2 = null! as i0.FormField;');
+      expect(block).toContain('_t2.field = (((this).f));');
+    });
+
     it('should generate a custom value control', () => {
       const block = tcb('<custom-control [formField]="f"/>', [
         FieldMock,

packages/compiler/src/typecheck/ops/signal_forms.ts

@@ -142,11 +142,15 @@ export class TcbNativeFieldOp extends TcbOp {
   }
 
   private getExpectedTypeFromDomNode(node: Element): string | null {
-    if (node.name === 'textarea' || node.name === 'select') {
-      // `<textarea>` and `<select>` are always strings.
+    if (node.name === 'textarea') {
+      // `<textarea>` is always a string.
       return 'string';
     }
 
+    if (node.name === 'select') {
+      return hasMultipleSelect(node) ? 'string[]' : 'string';
+    }
+
     if (node.name !== 'input') {
       return this.getUnsupportedType();
     }
@@ -196,6 +200,18 @@ export class TcbNativeFieldOp extends TcbOp {
   }
 }
 
+function hasMultipleSelect(node: Element): boolean {
+  if (node.attributes.some((attr) => attr.name.toLowerCase() === 'multiple')) {
+    return true;
+  }
+
+  return node.inputs.some(
+    (input) =>
+      (input.type === BindingType.Property || input.type === BindingType.Attribute) &&
+      input.name.toLowerCase() === 'multiple',
+  );
+}
+
 /**
  * A variation of the `TcbNativeFieldOp` with specific logic for radio buttons.
  */

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

@@ -0,0 +1,95 @@
+/**
+ * @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 {
+  bindingUpdated,
+  CONTROL_BINDING_NAMES,
+  createBindings,
+  readFieldStateBindingValue,
+  type ControlBindingKey,
+} from './bindings';
+import type {FormField} from './form_field';
+import {setNativeDomProperty} from './native';
+import {observeSelectMutations} from './select';
+
+export function selectMultipleControlCreate(
+  host: ControlDirectiveHost,
+  parent: FormField<unknown>,
+): () => void {
+  let updateMode = false;
+  const select = parent.nativeFormElement as HTMLSelectElement;
+
+  host.listenToDom('input', () =>
+    parent.state().controlValue.set(getSelectMultipleControlValue(select)),
+  );
+  host.listenToDom('blur', () => parent.state().markAsTouched());
+
+  parent.registerAsBinding();
+
+  observeSelectMutations(
+    select,
+    () => {
+      if (!updateMode) {
+        return;
+      }
+      setSelectMultipleControlValue(select, parent.state().controlValue());
+    },
+    parent.destroyRef,
+  );
+
+  const bindings = createBindings<ControlBindingKey | 'controlValue'>();
+
+  return () => {
+    const state = parent.state();
+    const controlValue = state.controlValue();
+    if (bindingUpdated(bindings, 'controlValue', controlValue)) {
+      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);
+        }
+      }
+    }
+
+    updateMode = true;
+  };
+}
+
+function getSelectMultipleControlValue(select: HTMLSelectElement): string[] {
+  const selected: string[] = [];
+  const selectedOptions = select.selectedOptions;
+
+  if (selectedOptions !== undefined) {
+    for (let i = 0; i < selectedOptions.length; i++) {
+      selected.push(selectedOptions[i].value);
+    }
+    return selected;
+  }
+
+  for (let i = 0; i < select.options.length; i++) {
+    const option = select.options[i];
+    if (option.selected) {
+      selected.push(option.value);
+    }
+  }
+
+  return selected;
+}
+
+function setSelectMultipleControlValue(select: HTMLSelectElement, value: unknown): void {
+  const selectedValues = new Set(Array.isArray(value) ? 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/directive/form_field.ts

@@ -43,6 +43,7 @@ import {bindingUpdated, type ControlBindingKey, createBindings} from './bindings
 import {customControlCreate} from './control_custom';
 import {cvaControlCreate} from './control_cva';
 import {nativeControlCreate} from './control_native';
+import {selectMultipleControlCreate} from './control_select_multiple';
 import {
   isNativeFormElement,
   isNumericFormElement,
@@ -341,6 +342,12 @@ export class FormField<T> {
       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.nativeFormElement.tagName === 'SELECT' &&
+      (this.nativeFormElement as HTMLSelectElement).multiple
+    ) {
+      this.ɵngControlUpdate = selectMultipleControlCreate(host, this as FormField<unknown>);
     } else if (this.elementIsNativeFormElement) {
       this.ɵngControlUpdate = nativeControlCreate(
         host,

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

@@ -3923,6 +3923,42 @@ describe('field directive', () => {
     expect(cmp.f().value()).toBe('two');
   });
 
+  it('synchronizes with a multiple select', () => {
+    @Component({
+      imports: [FormField],
+      template: `
+        <select #select multiple [formField]="$any(f)">
+          <option value="one">One</option>
+          <option value="two">Two</option>
+          <option value="three">Three</option>
+        </select>
+      `,
+    })
+    class TestCmp {
+      f = form(signal<string[]>(['two']));
+      select = viewChild.required<ElementRef<HTMLSelectElement>>('select');
+    }
+
+    const fix = act(() => TestBed.createComponent(TestCmp));
+    const select = fix.componentInstance.select().nativeElement;
+    const cmp = fix.componentInstance as TestCmp;
+
+    expect(Array.from(select.selectedOptions, (option) => option.value)).toEqual(['two']);
+
+    // Model -> View
+    act(() => cmp.f().value.set(['one', 'three']));
+    expect(Array.from(select.selectedOptions, (option) => option.value)).toEqual(['one', 'three']);
+
+    // View -> Model
+    act(() => {
+      for (const option of Array.from(select.options)) {
+        option.selected = option.value !== 'three';
+      }
+      select.dispatchEvent(new Event('input'));
+    });
+    expect(cmp.f().value()).toEqual(['one', 'two']);
+  });
+
   it('synchronizes with a custom value control', () => {
     @Component({
       selector: 'my-input',