fix(forms): place controlCreate before listeners in signal forms template creation block

Previously, the ControlCreate IR op was inserted after the target element's
create op (ElementStart/Element), but because the ordering phase places
listeners (Listener, TwoWayListener) immediately after element-start ops, the
ControlCreate op ended up being emitted after the ElementEnd instruction.

This caused a behaviour discrepancy between [formField] and [(ngModel)]:
inside an (input) event handler, the field value reported by Signal Forms
still held the old value while ngModel already reflected the new one. The
ControlCreate runtime instruction sets up the two-way sync between the DOM
control and the field signal, so it must be called early during element
creation (before any listeners that may read the updated value).

Two compiler changes fix this:

1. control_directives.ts - findCreateInstruction now returns the *first*
   matching create op for a given target xref (ElementStart or Element)
   instead of the last one. Previously ElementEnd was in the eligible set which
   meant the search returned the ElementEnd op, causing ControlCreate to land
   after it. Removing ElementEnd and ContainerEnd from CONTROL_OP_CREATE_KINDS
   ensures the op is always inserted immediately after the opening tag.

2. empty_elements.ts - ElementStart+ElementEnd pairs that contain only a
   ControlCreate op between them can still be collapsed into a single Element
   instruction. Added ir.OpKind.ControlCreate to IGNORED_OP_KINDS so the
   collapseEmptyInstructions phase skips over it when looking for a matching
   start op.

Compliance test golden files for two-way binding templates updated to reflect
the new (correct) instruction order: controlCreate now appears immediately after
elementStart, before the twoWayListener.

Fixes angular#68182
Related: angular#63608

Author: surajy93

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,10 +43,8 @@ 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,
 ]);
 
@@ -55,16 +53,14 @@ function isRelevantCreateOp(createOp: ir.CreateOp): createOp is ir.CreateOp & {x
 }
 
 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;
     }
-
-    lastFoundOp = createOp;
+    return createOp;
   }
 
-  return lastFoundOp;
+  return null;
 }
 
 function addControlInstruction(

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

@@ -18,7 +18,7 @@ const REPLACEMENTS = new Map<ir.OpKind, [ir.OpKind, ir.OpKind]>([
 /**
  * Op kinds that should not prevent merging of start/end ops.
  */
-const IGNORED_OP_KINDS = new Set([ir.OpKind.Pipe]);
+const IGNORED_OP_KINDS = new Set([ir.OpKind.Pipe, ir.OpKind.ControlCreate]);
 
 /**
  * Replace sequences of mergable instructions (e.g. `ElementStart` and `ElementEnd`) with a

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

@@ -135,6 +135,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', () => {