fix(forms): interop supports CVAs with signals (#64618)

The directive implemnetation might set CVA values during the template evaluation. Since the template is a reactive context we need to untrack when setting the CVA values to prevent writing to signals in a reactive context.

fixes #64614

PR Close #64618

Author: JeanMeche

packages/forms/signals/src/api/field_directive.ts

@@ -14,6 +14,7 @@ import {
   InjectionToken,
   Injector,
   input,
+  untracked,
   ɵCONTROL,
   ɵControl,
 } from '@angular/core';
@@ -95,8 +96,18 @@ export class Field<T> implements ɵControl<T> {
     const controlValueAccessor = this.controlValueAccessor!;
     // TODO: https://github.com/orgs/angular/projects/60/views/1?pane=issue&itemId=131711472
     // * check if values changed since last update before writing.
-    controlValueAccessor.writeValue(this.state().value());
-    controlValueAccessor.setDisabledState?.(this.state().disabled());
+
+    // These values remain reactive
+    const value = this.state().value();
+    const disabled = this.state().disabled();
+
+    // The CVA is accessed in a reactive context (the template executation)
+    // Since we don't control the implementation of the CVA and it can have underlying signals
+    // We need to untrack to prevent writing to a signal in a reactive context
+    untracked(() => {
+      controlValueAccessor.writeValue(value);
+      controlValueAccessor.setDisabledState?.(disabled);
+    });
   }
 
   // TODO: https://github.com/orgs/angular/projects/60/views/1?pane=issue&itemId=131861631

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

@@ -220,6 +220,63 @@ describe('ControlValueAccessor', () => {
     });
     expect(fixture.componentInstance.f().value()).toBe('typing');
   });
+
+  it('should not throw if the ControlValueAccessor implementation uses signals', () => {
+    @Component({
+      selector: 'signal-custom-control',
+      template: `<input [value]="value()" [disabled]="disabled()" />`,
+      providers: [{provide: NG_VALUE_ACCESSOR, useExisting: CustomControl, multi: true}],
+    })
+    class CustomControl implements ControlValueAccessor {
+      value = signal('');
+      disabled = signal(false);
+
+      private onChangeFn?: (value: string) => void;
+      private onTouchedFn?: () => void;
+
+      writeValue(newValue: string): void {
+        this.value.set(newValue);
+      }
+
+      registerOnChange(fn: (value: string) => void): void {
+        this.onChangeFn = fn;
+      }
+
+      registerOnTouched(fn: () => void): void {
+        this.onTouchedFn = fn;
+      }
+
+      setDisabledState(disabled: boolean): void {
+        this.disabled.set(disabled);
+      }
+
+      onBlur() {
+        this.onTouchedFn?.();
+      }
+
+      onInput(newValue: string) {
+        this.value.set(newValue);
+        this.onChangeFn?.(newValue);
+      }
+    }
+
+    @Component({
+      selector: 'app-root',
+      imports: [CustomControl, Field],
+      template: `<signal-custom-control [field]="f" />`,
+    })
+    class App {
+      disabled = signal(false);
+      readonly f = form(signal('test'), (f) => {
+        disabled(f, () => this.disabled());
+      });
+    }
+
+    const fixture = TestBed.createComponent(App);
+    expect(() => fixture.detectChanges()).not.toThrowError(/NG0600/);
+
+    expect(() => fixture.componentInstance.disabled.set(true)).not.toThrowError(/NG0600/);
+  });
 });
 
 function act<T>(fn: () => T): T {