fix(forms): create controls before listeners

Create form controls before registering template listeners so custom control values are synchronized before user callbacks run. Cover Signal Forms, reactive forms, and template-driven forms.

Author: surajy93

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_bindings/control_bindings/control_bindings.js

@@ -12,8 +12,9 @@ export class MyComponent {
         i0.ɵɵelementStart(1, "div");
         i0.ɵɵtext(2, "Not a form control either.");
         i0.ɵɵelementEnd();
-        i0.ɵɵelement(3, "input", 1);
+        i0.ɵɵelementStart(3, "input", 1);
         i0.ɵɵcontrolCreate();
+        i0.ɵɵelementEnd();
       }
       if (rf & 2) {
         i0.ɵɵadvance();

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_bindings/control_bindings/radio_bindings.js

@@ -8,10 +8,12 @@ export class MyComponent {
     consts: [["type", "radio", "id", "radio", 3, "formField", "value"], ["type", "radio", "id", "radio", 3, "value", "formField"]],
     template: function MyComponent_Template(rf, ctx) {
       if (rf & 1) {
-        i0.ɵɵelement(0, "input", 0);
+        i0.ɵɵelementStart(0, "input", 0);
         i0.ɵɵcontrolCreate();
-        i0.ɵɵelement(1, "input", 1);
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementStart(1, "input", 1);
         i0.ɵɵcontrolCreate();
+        i0.ɵɵelementEnd();
       }
       if (rf & 2) {
         i0.ɵɵproperty("formField", ctx.value)("value", "foo");

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/nested_two_way_template.js

@@ -2,14 +2,14 @@ function TestCmp_ng_template_1_Template(rf, ctx) {
   if (rf & 1) {
     const $_r2$ = $r3$.ɵɵgetCurrentView();
     $r3$.ɵɵelementStart(0, "input", 0);
+    $r3$.ɵɵcontrolCreate();
     $r3$.ɵɵtwoWayListener("ngModelChange", function TestCmp_ng_template_1_Template_input_ngModelChange_0_listener($event) {
       $r3$.ɵɵrestoreView($_r2$);
       const $ctx_r1$ = $r3$.ɵɵnextContext();
       $r3$.ɵɵtwoWayBindingSet($ctx_r1$.name, $event) || ($ctx_r1$.name = $event);
       return $r3$.ɵɵresetView($event);
     });
     $r3$.ɵɵelementEnd();
-    $r3$.ɵɵcontrolCreate();
   } if (rf & 2) {
     const $ctx_r0$ = $r3$.ɵɵnextContext();
     $r3$.ɵɵtwoWayProperty("ngModel", $ctx_r0$.name);

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/simple_two_way_template.js

@@ -2,12 +2,12 @@ function TestCmp_Template(rf, ctx) {
   if (rf & 1) {
     $r3$.ɵɵtext(0, "Name: ");
     $r3$.ɵɵelementStart(1, "input", 0);
+    $r3$.ɵɵcontrolCreate();
     $r3$.ɵɵtwoWayListener("ngModelChange", function TestCmp_Template_input_ngModelChange_1_listener($event) {
       $r3$.ɵɵtwoWayBindingSet(ctx.name, $event) || (ctx.name = $event);
       return $event;
     });
     $r3$.ɵɵelementEnd();
-    $r3$.ɵɵcontrolCreate();
   } if (rf & 2) {
     $r3$.ɵɵadvance();
     $r3$.ɵɵtwoWayProperty("ngModel", ctx.name);

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/two_way_binding_to_signal_loop_variable_template.js

@@ -2,13 +2,13 @@ function TestCmp_For_1_Template(rf, ctx) {
   if (rf & 1) {
     const $_r1$ = $r3$.ɵɵgetCurrentView();
     $r3$.ɵɵelementStart(0, "input", 1);
+    $r3$.ɵɵcontrolCreate();
     $r3$.ɵɵtwoWayListener("ngModelChange", function TestCmp_For_1_Template_input_ngModelChange_0_listener($event) {
       const $name_r2$ = $r3$.ɵɵrestoreView($_r1$).$implicit;
       $r3$.ɵɵtwoWayBindingSet($name_r2$, $event);
       return $r3$.ɵɵresetView($event);
     });
     $r3$.ɵɵelementEnd();
-    $r3$.ɵɵcontrolCreate();
   }
   if (rf & 2) {
     const $name_r2$ = ctx.$implicit;

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/two_way_to_any_template.js

@@ -1,12 +1,12 @@
 function TestCmp_Template(rf, ctx) {
   if (rf & 1) {
     $r3$.ɵɵelementStart(0, "input", 0);
+    $r3$.ɵɵcontrolCreate();
     $r3$.ɵɵtwoWayListener("ngModelChange", function TestCmp_Template_input_ngModelChange_0_listener($event) {
       $r3$.ɵɵtwoWayBindingSet(ctx.value, $event) || (ctx.value = $event);
       return $event;
     });
     $r3$.ɵɵelementEnd();
-    $r3$.ɵɵcontrolCreate();
   }
   if (rf & 2) {
     $r3$.ɵɵtwoWayProperty("ngModel", ctx.value);

packages/compiler/src/template/pipeline/src/phases/control_directives.ts

@@ -43,28 +43,22 @@ function processView(view: ViewCompilationUnit): void {
 const CONTROL_OP_CREATE_KINDS = new Set([
   ir.OpKind.Container,
   ir.OpKind.ContainerStart,
-  ir.OpKind.ContainerEnd,
   ir.OpKind.Element,
   ir.OpKind.ElementStart,
-  ir.OpKind.ElementEnd,
-  ir.OpKind.Template,
 ]);
 
 function isRelevantCreateOp(createOp: ir.CreateOp): createOp is ir.CreateOp & {xref: ir.XrefId} {
   return CONTROL_OP_CREATE_KINDS.has(createOp.kind);
 }
 
 function findCreateInstruction(view: ViewCompilationUnit, target: ir.XrefId): ir.CreateOp | null {
-  let lastFoundOp: ir.CreateOp | null = null;
   for (const createOp of view.create) {
-    if (!isRelevantCreateOp(createOp) || createOp.xref !== target) {
-      continue;
+    if (isRelevantCreateOp(createOp) && createOp.xref === target) {
+      return createOp;
     }
-
-    lastFoundOp = createOp;
   }
 
-  return lastFoundOp;
+  return null;
 }
 
 function addControlInstruction(

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

@@ -136,6 +136,32 @@ describe('field directive', () => {
       });
       expect(component.model()).toEqual({x: 'a', y: 'c'});
     });
+
+    it('should update field value before template (input) listener fires', () => {
+      @Component({
+        imports: [FormField],
+        template: `<input [formField]="f.x" (input)="onInput()" />`,
+      })
+      class TestCmp {
+        readonly model = signal({x: 'a'});
+        readonly f = form(this.model);
+        observedDuringInput: string | undefined;
+
+        onInput() {
+          this.observedDuringInput = this.f.x().value();
+        }
+      }
+      const fixture = act(() => TestBed.createComponent(TestCmp));
+      const component = fixture.componentInstance;
+      const input = fixture.nativeElement.firstChild as HTMLInputElement;
+
+      act(() => {
+        input.value = 'b';
+        input.dispatchEvent(new Event('input'));
+      });
+      expect(component.observedDuringInput).toBe('b');
+      expect(component.model()).toEqual({x: 'b'});
+    });
   });
 
   describe('host directive mapping', () => {

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" />`,