fix(forms): support custom controls with non signal-based models

* Recognize directives with non signal-based models as valid custom controls
* Relax type checker to allow non signal-based models

The `FormValueControl` and `FormCheckboxControl` interfaces still
require a `model()`-input, however, a custom control need not implement
either interface to be bound by the `Field` directive.

All of the following examples can be used to define a custom control:

```ts
// Preferred: model()
class MyFormControl implements FormValueControl<string> {
  readonly value: model.required<string>();
}

// Supported: input() + output()
class MyFormControl {
  readonly value: input.required<string>();
  readonly valueChange: output<string>();
}

// Supported: @input() + @output()
class MyFormControl {
  @input({required: true}) value!: string;
  @output() valueChange: new EventEmitter<string>();
}
```

The latter two may still choose to implement `FormUiControl` for other
properties, but again it is not required.

Fix #65478

(cherry picked from commit cb09fb8)

Author: leonsenft

packages/compiler-cli/src/ngtsc/typecheck/src/ops/signal_forms.ts

@@ -440,10 +440,9 @@ function extractFieldValue(expression: AST, tcb: Context, scope: Scope): ts.Expr
   );
 }
 
-/** Checks whether a directive has a model input with a specific name. */
+/** Checks whether a directive has a model-like input with a specific name. */
 function hasModelInput(name: string, meta: TypeCheckableDirectiveMeta): boolean {
   return (
-    !!meta.inputs.getByBindingPropertyName(name)?.some((v) => v.isSignal) &&
-    meta.outputs.hasBindingPropertyName(name + 'Change')
+    meta.inputs.hasBindingPropertyName(name) && meta.outputs.hasBindingPropertyName(name + 'Change')
   );
 }

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

@@ -12,7 +12,6 @@ import {assertFirstCreatePass} from '../assert';
 import {bindingUpdated} from '../bindings';
 import {ɵCONTROL, ɵControl, ɵFieldState} from '../interfaces/control';
 import {DirectiveDef} from '../interfaces/definition';
-import {InputFlags} from '../interfaces/input_flags';
 import {TElementNode, TNode, TNodeFlags, TNodeType} from '../interfaces/node';
 import {Renderer} from '../interfaces/renderer';
 import {SanitizerFn} from '../interfaces/sanitization';
@@ -296,15 +295,19 @@ function getControlDirective<T>(tNode: TNode, lView: LView): ɵControl<T> | null
   return index === -1 ? null : lView[index];
 }
 
-/** Returns whether the specified `directiveDef` has a model input named `name`. */
+/**
+ * Returns whether the specified `directiveDef` has a model-like input named `name`.
+ *
+ * A model-like input is an input-output pair where the input is named `name` and the output is
+ * named `name + 'Change'`.
+ */
 function hasModelInput(directiveDef: DirectiveDef<unknown>, name: string): boolean {
-  return hasSignalInput(directiveDef, name) && hasOutput(directiveDef, name + 'Change');
+  return hasInput(directiveDef, name) && hasOutput(directiveDef, name + 'Change');
 }
 
-/** Returns whether the specified `directiveDef` has a signal-based input named `name`.*/
-function hasSignalInput(directiveDef: DirectiveDef<unknown>, name: string): boolean {
-  const input = directiveDef.inputs[name];
-  return input && (input[1] & InputFlags.SignalBased) !== 0;
+/** Returns whether the specified `directiveDef` has an input named `name`.*/
+function hasInput(directiveDef: DirectiveDef<unknown>, name: string): boolean {
+  return name in directiveDef.inputs;
 }
 
 /** Returns whether the specified `directiveDef` has an output named `name`. */

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

@@ -12,12 +12,16 @@ import {
   computed,
   Directive,
   ElementRef,
+  EventEmitter,
   inject,
   Injector,
   input,
   inputBinding,
+  Input,
   model,
   numberAttribute,
+  output,
+  Output,
   resource,
   signal,
   viewChild,
@@ -1495,6 +1499,80 @@ describe('field directive', () => {
     expect(cmp.f().value()).toBe('typing');
   });
 
+  it('synchronizes with a custom value control with separate input and output properties', () => {
+    @Component({
+      selector: 'my-input',
+      template: '<input #i [value]="value()" (input)="valueChange.emit(i.value)" />',
+    })
+    class CustomInput {
+      readonly value = input.required<string>();
+      readonly valueChange = output<string>();
+    }
+
+    @Component({
+      imports: [Field, CustomInput],
+      template: `<my-input [field]="f" />`,
+    })
+    class TestCmp {
+      f = form<string>(signal('test'));
+    }
+
+    const fix = act(() => TestBed.createComponent(TestCmp));
+    const element = fix.nativeElement.firstChild.firstChild as HTMLInputElement;
+    const cmp = fix.componentInstance as TestCmp;
+
+    // Initial state
+    expect(element.value).toBe('test');
+
+    // Model -> View
+    act(() => cmp.f().value.set('testing'));
+    expect(element.value).toBe('testing');
+
+    // View -> Model
+    act(() => {
+      element.value = 'typing';
+      element.dispatchEvent(new Event('input'));
+    });
+    expect(cmp.f().value()).toBe('typing');
+  });
+
+  it('synchronizes with a custom value control with separate @Input and @Output properties', () => {
+    @Component({
+      selector: 'my-input',
+      template: '<input #i [value]="value" (input)="valueChange.emit(i.value)" />',
+    })
+    class CustomInput {
+      @Input({required: true}) value!: string;
+      @Output() valueChange = new EventEmitter<string>();
+    }
+
+    @Component({
+      imports: [Field, CustomInput],
+      template: `<my-input [field]="f" />`,
+    })
+    class TestCmp {
+      f = form<string>(signal('test'));
+    }
+
+    const fix = act(() => TestBed.createComponent(TestCmp));
+    const element = fix.nativeElement.firstChild.firstChild as HTMLInputElement;
+    const cmp = fix.componentInstance as TestCmp;
+
+    // Initial state
+    expect(element.value).toBe('test');
+
+    // Model -> View
+    act(() => cmp.f().value.set('testing'));
+    expect(element.value).toBe('testing');
+
+    // View -> Model
+    act(() => {
+      element.value = 'typing';
+      element.dispatchEvent(new Event('input'));
+    });
+    expect(cmp.f().value()).toBe('typing');
+  });
+
   it('synchronizes with a custom checkbox control', () => {
     @Component({
       selector: 'my-checkbox',
@@ -1532,6 +1610,82 @@ describe('field directive', () => {
     expect(cmp.f().value()).toBe(true);
   });
 
+  it('synchronizes with a custom checkbox control with separate input and output properties', () => {
+    @Component({
+      selector: 'my-checkbox',
+      template:
+        '<input type="checkbox" #i [checked]="checked()" (input)="checkedChange.emit(i.checked)" />',
+    })
+    class CustomCheckbox {
+      readonly checked = input.required<boolean>();
+      readonly checkedChange = output<boolean>();
+    }
+
+    @Component({
+      imports: [Field, CustomCheckbox],
+      template: `<my-checkbox [field]="f" />`,
+    })
+    class TestCmp {
+      f = form<boolean>(signal(true));
+    }
+
+    const fix = act(() => TestBed.createComponent(TestCmp));
+    const element = fix.nativeElement.querySelector('input') as HTMLInputElement;
+    const cmp = fix.componentInstance as TestCmp;
+
+    // Initial state
+    expect(element.checked).toBe(true);
+
+    // Model -> View
+    act(() => cmp.f().value.set(false));
+    expect(element.checked).toBe(false);
+
+    // View -> Model
+    act(() => {
+      element.checked = true;
+      element.dispatchEvent(new Event('input'));
+    });
+    expect(cmp.f().value()).toBe(true);
+  });
+
+  it('synchronizes with a custom checkbox control with separate @Input and @Output properties', () => {
+    @Component({
+      selector: 'my-checkbox',
+      template:
+        '<input type="checkbox" #i [checked]="checked" (input)="checkedChange.emit(i.checked)" />',
+    })
+    class CustomCheckbox {
+      @Input({required: true}) checked!: boolean;
+      @Output() checkedChange = new EventEmitter<boolean>();
+    }
+
+    @Component({
+      imports: [Field, CustomCheckbox],
+      template: `<my-checkbox [field]="f" />`,
+    })
+    class TestCmp {
+      f = form<boolean>(signal(true));
+    }
+
+    const fix = act(() => TestBed.createComponent(TestCmp));
+    const element = fix.nativeElement.querySelector('input') as HTMLInputElement;
+    const cmp = fix.componentInstance as TestCmp;
+
+    // Initial state
+    expect(element.checked).toBe(true);
+
+    // Model -> View
+    act(() => cmp.f().value.set(false));
+    expect(element.checked).toBe(false);
+
+    // View -> Model
+    act(() => {
+      element.checked = true;
+      element.dispatchEvent(new Event('input'));
+    });
+    expect(cmp.f().value()).toBe(true);
+  });
+
   it('synchronizes with a custom checkbox control directive', () => {
     @Directive({
       selector: 'input[my-checkbox]',