test(forms): cover custom control listener order

Ensure reactive and template-driven custom controls update their directive-backed control before explicit valueChange listeners run.

Author: surajy93

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

@@ -71,6 +71,30 @@ describe('FormControlDirective with FVC', () => {
     expect(fixture.componentInstance.ctrl.value).toBe('from-fvc');
   });
 
+  it('should update FormControl value before template (valueChange) listener fires', () => {
+    @Component({
+      template: `<my-fvc-input [formControl]="ctrl" (valueChange)="onValueChange()" />`,
+      imports: [MyFvcInput, ReactiveFormsModule],
+    })
+    class TestCmp {
+      ctrl = new FormControl('initial');
+      observedDuringValueChange: string | null | undefined;
+
+      onValueChange() {
+        this.observedDuringValueChange = this.ctrl.value;
+      }
+    }
+
+    const fixture = act(() => TestBed.createComponent(TestCmp));
+    const component = fixture.componentInstance;
+    const fvc = fixture.debugElement.query(By.directive(MyFvcInput)).componentInstance;
+
+    act(() => fvc.value.set('from-fvc'));
+
+    expect(component.observedDuringValueChange).toBe('from-fvc');
+    expect(component.ctrl.value).toBe('from-fvc');
+  });
+
   it('should fall back to CVA when no FVC pattern is present', () => {
     @Component({
       template: `<input [formControl]="ctrl" />`,
@@ -553,6 +577,36 @@ describe('FormControlName with FVC', () => {
     expect(fixture.componentInstance.form.controls.name.value).toBe('from-fvc');
   });
 
+  it('should update FormControl value before template (valueChange) listener fires', () => {
+    @Component({
+      template: `
+        <form [formGroup]="form">
+          <my-fvc-input formControlName="name" (valueChange)="onValueChange()" />
+        </form>
+      `,
+      imports: [MyFvcInput, ReactiveFormsModule],
+    })
+    class TestCmp {
+      form = new FormGroup({
+        name: new FormControl('initial'),
+      });
+      observedDuringValueChange: string | null | undefined;
+
+      onValueChange() {
+        this.observedDuringValueChange = this.form.controls.name.value;
+      }
+    }
+
+    const fixture = act(() => TestBed.createComponent(TestCmp));
+    const component = fixture.componentInstance;
+    const fvc = fixture.debugElement.query(By.directive(MyFvcInput)).componentInstance;
+
+    act(() => fvc.value.set('from-fvc'));
+
+    expect(component.observedDuringValueChange).toBe('from-fvc');
+    expect(component.form.controls.name.value).toBe('from-fvc');
+  });
+
   it('should fall back to CVA when no FVC pattern is present', () => {
     @Component({
       template: `

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

@@ -73,6 +73,31 @@ describe('NgModel with FVC', () => {
     expect(fixture.componentInstance.val()).toBe('from-fvc');
   });
 
+  it('should update ngModel value before template (valueChange) listener fires', async () => {
+    @Component({
+      template: `<template-fvc-input [(ngModel)]="val" (valueChange)="onValueChange()" #model="ngModel" />`,
+      imports: [TemplateFvcInput, FormsModule],
+    })
+    class TestCmp {
+      val = signal('initial');
+      observedDuringValueChange: string | undefined;
+      @ViewChild('model') model!: NgModel;
+
+      onValueChange() {
+        this.observedDuringValueChange = this.model.control.value;
+      }
+    }
+
+    const fixture = await actAsync(() => TestBed.createComponent(TestCmp));
+    const component = fixture.componentInstance;
+    const fvc = fixture.debugElement.query(By.directive(TemplateFvcInput)).componentInstance;
+
+    act(() => fvc.value.set('from-fvc'));
+
+    expect(component.observedDuringValueChange).toBe('from-fvc');
+    expect(component.val()).toBe('from-fvc');
+  });
+
   it('should fall back to CVA when no FVC pattern is present', async () => {
     @Component({
       template: `<input [(ngModel)]="val" />`,