angular · alxhub · Mar 26, 2026
diff --git a/goldens/public-api/forms/index.api.md b/goldens/public-api/forms/index.api.md
@@ -17,6 +17,7 @@ import { OnChanges } from '@angular/core';
 import { OnDestroy } from '@angular/core';
 import { OnInit } from '@angular/core';
 import { Renderer2 } from '@angular/core';
+import { Signal } from '@angular/core';
 import { SimpleChanges } from '@angular/core';
 import { Version } from '@angular/core';
 import { ɵControlDirectiveHost } from '@angular/core';
@@ -245,6 +246,9 @@ export abstract class ControlEvent<T = any> {
 
 // @public
 export interface ControlValueAccessor {
+    readonly parseErrors?: Signal<ReadonlyArray<{
+        readonly kind: string;
+    }>> | undefined;
     registerOnChange(fn: any): void;
     registerOnTouched(fn: any): void;
     setDisabledState?(isDisabled: boolean): void;

diff --git a/packages/forms/signals/src/directive/control_cva.ts b/packages/forms/signals/src/directive/control_cva.ts
@@ -25,6 +25,11 @@ export function cvaControlCreate(
     parent.state().controlValue.set(value as any),
   );
   parent.controlValueAccessor!.registerOnTouched(() => parent.state().markAsTouched());
+
+  if (parent.controlValueAccessor!.parseErrors) {
+    parent.parseErrorsSource.set(parent.controlValueAccessor!.parseErrors);
+  }
+
   parent.registerAsBinding();
 
   const bindings = createBindings<ControlBindingKey | 'controlValue'>();

diff --git a/packages/forms/signals/src/directive/form_field.ts b/packages/forms/signals/src/directive/form_field.ts
@@ -155,7 +155,8 @@ export class FormField<T> {
   private readonly config = inject(SIGNAL_FORMS_CONFIG, {optional: true});
   private readonly validityMonitor = inject(InputValidityMonitor);
 
-  private readonly parseErrorsSource = signal<
+  /** @internal */
+  readonly parseErrorsSource = signal<
     Signal<readonly ValidationError.WithoutFieldTree[]> | undefined
   >(undefined);
 

diff --git a/packages/forms/signals/test/web/interop.spec.ts b/packages/forms/signals/test/web/interop.spec.ts
@@ -132,6 +132,55 @@ describe('ControlValueAccessor', () => {
     expect(fixture.componentInstance.f().value()).toBe('typing');
   });
 
+  it('propagates parse errors from CVA to field', () => {
+    const parseErrors = signal<ReadonlyArray<{readonly kind: string}>>([]);
+
+    @Component({
+      selector: 'custom-control-with-errors',
+      template: `<input [value]="value" (input)="onInput($event.target.value)" />`,
+      providers: [{provide: NG_VALUE_ACCESSOR, useExisting: CustomControlWithErrors, multi: true}],
+    })
+    class CustomControlWithErrors implements ControlValueAccessor {
+      value = '';
+      parseErrors = parseErrors;
+
+      private onChangeFn?: (value: string) => void;
+
+      writeValue(newValue: string): void {
+        this.value = newValue;
+      }
+
+      registerOnChange(fn: (value: string) => void): void {
+        this.onChangeFn = fn;
+      }
+
+      registerOnTouched(fn: () => void): void {}
+
+      onInput(newValue: string) {
+        this.value = newValue;
+        this.onChangeFn?.(newValue);
+      }
+    }
+
+    @Component({
+      imports: [CustomControlWithErrors, FormField],
+      template: `<custom-control-with-errors [formField]="f" />`,
+    })
+    class TestCmp {
+      readonly f = form(signal('test'));
+    }
+
+    const fixture = act(() => TestBed.createComponent(TestCmp));
+    const field = fixture.componentInstance.f;
+
+    expect(field().errors()).toEqual([]);
+
+    act(() => parseErrors.set([{kind: 'custom-parse'}]));
+    expect(field().errors()).toEqual([
+      {kind: 'custom-parse', fieldTree: field, formField: jasmine.any(Object) as any},
+    ]);
+  });
+
   it('should support debounce', async () => {
     const {promise, resolve} = promiseWithResolvers<void>();
 

diff --git a/packages/forms/src/directives/control_value_accessor.ts b/packages/forms/src/directives/control_value_accessor.ts
@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {Directive, ElementRef, InjectionToken, Renderer2} from '@angular/core';
+import {Directive, ElementRef, InjectionToken, Renderer2, type Signal} from '@angular/core';
 
 /**
  * @description
@@ -21,6 +21,21 @@ import {Directive, ElementRef, InjectionToken, Renderer2} from '@angular/core';
  * @publicApi
  */
 export interface ControlValueAccessor {
+  /**
+   * @description
+   * Exposes parse errors when a UI control is used via Signal Forms.
+   * Parse errors occur when a user enters a value into a UI control (e.g., a non-date string in a date picker)
+   * that cannot be parsed into the target model type.
+   *
+   * @usageNotes
+   * ### Expose parse errors
+   *
+   * ```ts
+   * readonly parseErrors = signal<ReadonlyArray<{readonly kind: string}>>([]);
+   * ```
+   */
+  readonly parseErrors?: Signal<ReadonlyArray<{readonly kind: string}>> | undefined;
+
   /**
    * @description
    * Writes a new value to the element.