fix(forms): clear parse errors when model updates (#66917)

mmalerba · mattrbeck · commit 27397b3f4f31 · 2026-02-13T12:11:06.000-08:00
Changes `parsedErrors` to a `linkedSignal` based on the model value. This ensures that the parse errors are reset if the model changes from outside the control. PR Close #66917
diff --git a/packages/forms/signals/src/api/transformed_value.ts b/packages/forms/signals/src/api/transformed_value.ts
@@ -11,7 +11,6 @@ import {
   linkedSignal,
   type ModelSignal,
   type Signal,
-  signal,
   type WritableSignal,
 } from '@angular/core';
 import {FORM_FIELD_PARSE_ERRORS} from '../directive/parse_errors';
@@ -94,7 +93,10 @@ export function transformedValue<TValue, TRaw>(
 ): TransformedValueSignal<TRaw> {
   const {parse, format} = options;
 
-  const parseErrors = signal<readonly ValidationError.WithoutFieldTree[]>([]);
+  const parseErrors = linkedSignal({
+    source: value,
+    computation: () => [] as readonly ValidationError.WithoutFieldTree[],
+  });
   const rawValue = linkedSignal(() => format(value()));
 
   const formFieldParseErrors = inject(FORM_FIELD_PARSE_ERRORS, {self: true, optional: true});
diff --git a/packages/forms/signals/test/node/parse_errors.spec.ts b/packages/forms/signals/test/node/parse_errors.spec.ts
@@ -274,6 +274,36 @@ describe('parse errors', () => {
     expect(comp.model()).toBe(null);
     expect(comp.f().errors().length).toBe(0);
   });
+
+  it('should clear parse errors on one control when another control for the same field updates the model', async () => {
+    @Component({
+      imports: [TestNumberInput, FormField],
+      template: `
+        <test-number-input id="input1" [formField]="f" />
+        <test-number-input id="input2" [formField]="f" />
+      `,
+    })
+    class TestCmp {
+      state = signal<number | null>(5);
+      f = form(this.state);
+    }
+
+    const testEl = (await act(() => TestBed.createComponent(TestCmp))).nativeElement as HTMLElement;
+    const input1: HTMLInputElement = testEl.querySelector('#input1 input')!;
+    const input2: HTMLInputElement = testEl.querySelector('#input2 input')!;
+
+    input1.value = 'joe';
+    await act(() => input1.dispatchEvent(new Event('input')));
+    let errors1 = [...testEl.querySelectorAll('#input1 .error')].map((el) => el.textContent);
+    expect(errors1).toEqual(['joe is not numeric']);
+
+    input2.value = '42';
+    await act(() => input2.dispatchEvent(new Event('input')));
+
+    errors1 = [...testEl.querySelectorAll('#input1 .error')].map((el) => el.textContent);
+    expect(errors1).toEqual([]);
+    expect(input1.value).toBe('42');
+  });
 });
 
 @Component({
