fix(compiler-cli): do not type check native controls with ControlValueAccessor

crisbeto · kirjs · commit 39c577bc362b · 2025-11-24T13:08:46.000-05:00
Currently when we detect a `field` binding on a native element, we treat it as a built-in native control. This might not be the case if it's a pre-existing `ControlValueAccessor` relying on the CVA interop. These changes try to detect any CVA-like directive on the element and disable the additional type checking if there are any. Fixes #65468. (cherry picked from commit 6b8720d)
diff --git a/packages/compiler-cli/src/ngtsc/typecheck/src/ops/scope.ts b/packages/compiler-cli/src/ngtsc/typecheck/src/ops/scope.ts
@@ -55,6 +55,7 @@ import {
   CustomFieldType,
   getCustomFieldDirectiveType,
   isFieldDirective,
+  isNativeField,
   TcbNativeFieldDirectiveTypeOp,
 } from './signal_forms';
 import {Reference} from '../../../imports';
@@ -772,13 +773,8 @@ export class Scope {
     const dirIndex = this.opQueue.push(directiveOp) - 1;
     dirMap.set(dir, dirIndex);
 
-    if (
-      isFieldDirective(dir) &&
-      node instanceof TmplAstElement &&
-      (node.name === 'input' || node.name === 'select' || node.name === 'textarea') &&
-      !allDirectiveMatches.some(getCustomFieldDirectiveType)
-    ) {
-      this.opQueue.push(new TcbNativeFieldDirectiveTypeOp(this.tcb, this, node));
+    if (isNativeField(dir, node, allDirectiveMatches)) {
+      this.opQueue.push(new TcbNativeFieldDirectiveTypeOp(this.tcb, this, node as TmplAstElement));
     }
 
     this.opQueue.push(new TcbDirectiveInputsOp(this.tcb, this, node, dir, customFieldType));
diff --git a/packages/compiler-cli/src/ngtsc/typecheck/src/ops/signal_forms.ts b/packages/compiler-cli/src/ngtsc/typecheck/src/ops/signal_forms.ts
@@ -18,6 +18,7 @@ import {
   TmplAstDirective,
   TmplAstElement,
   TmplAstHostElement,
+  TmplAstNode,
   TmplAstTemplate,
 } from '@angular/compiler';
 import ts from 'typescript';
@@ -314,6 +315,43 @@ export function getCustomFieldDirectiveType(
   return null;
 }
 
+/** Determines if a directive usage is on a native field. */
+export function isNativeField(
+  dir: TypeCheckableDirectiveMeta,
+  node: TmplAstNode,
+  allDirectiveMatches: TypeCheckableDirectiveMeta[],
+): boolean {
+  // Only applies to the `Field` directive.
+  if (!isFieldDirective(dir)) {
+    return false;
+  }
+
+  // Only applies to input, select and textarea elements.
+  if (
+    !(node instanceof TmplAstElement) ||
+    (node.name !== 'input' && node.name !== 'select' && node.name !== 'textarea')
+  ) {
+    return false;
+  }
+
+  // Only applies if there are no custom fields or ControlValueAccessors.
+  return allDirectiveMatches.every((meta) => {
+    return getCustomFieldDirectiveType(meta) === null && !isControlValueAccessorLike(meta);
+  });
+}
+
+/**
+ * Determines if a directive is shaped like a `ControlValueAccessor`. Note that this isn't
+ * 100% reliable, because we don't know if the directive was actually provided at runtime.
+ */
+function isControlValueAccessorLike(meta: TypeCheckableDirectiveMeta): boolean {
+  return (
+    meta.publicMethods.has('writeValue') &&
+    meta.publicMethods.has('registerOnChange') &&
+    meta.publicMethods.has('registerOnTouched')
+  );
+}
+
 /** Checks whether a node has bindings that aren't supported on fields. */
 export function checkUnsupportedFieldBindings(
   node: DirectiveOwner,
diff --git a/packages/compiler-cli/test/ngtsc/signal_forms_spec.ts b/packages/compiler-cli/test/ngtsc/signal_forms_spec.ts
@@ -510,5 +510,69 @@ runInEachFileSystem(() => {
       const diags = env.driveDiagnostics();
       expect(diags.length).toBe(0);
     });
+
+    it('should not check field on native control that has a ControlValueAccessor directive', () => {
+      env.write(
+        'test.ts',
+        `
+          import {Component, Directive, signal} from '@angular/core';
+          import {ControlValueAccessor} from '@angular/forms';
+          import {Field, form} from '@angular/forms/signals';
+
+          @Directive({selector: '[customCva]'})
+          export class CustomCva implements ControlValueAccessor {
+            writeValue() {}
+            registerOnChange() {}
+            registerOnTouched() {}
+          }
+
+          @Component({
+            template: '<input customCva [field]="f"/>',
+            imports: [Field, CustomCva]
+          })
+          export class Comp {
+            f = form(signal(0));
+          }
+        `,
+      );
+
+      const diags = env.driveDiagnostics();
+      expect(diags.length).toBe(0);
+    });
+
+    it('should not check field on native control that has a directive inheriting from a ControlValueAccessor', () => {
+      env.write(
+        'test.ts',
+        `
+          import {Component, Directive, signal} from '@angular/core';
+          import {ControlValueAccessor} from '@angular/forms';
+          import {Field, form} from '@angular/forms/signals';
+
+          @Directive()
+          export class Grandparent implements ControlValueAccessor {
+            writeValue() {}
+            registerOnChange() {}
+            registerOnTouched() {}
+          }
+
+          @Directive()
+          export class Parent extends Grandparent {}
+
+          @Directive({selector: '[customCva]'})
+          export class CustomCva extends Parent {}
+
+          @Component({
+            template: '<input customCva [field]="f"/>',
+            imports: [Field, CustomCva]
+          })
+          export class Comp {
+            f = form(signal(0));
+          }
+        `,
+      );
+
+      const diags = env.driveDiagnostics();
+      expect(diags.length).toBe(0);
+    });
   });
 });
