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).

The ControlCreate runtime instruction reads the current TNode via
getCurrentTNode(), so it must run while the target element's TNode is still
active - i.e. between its ElementStart and ElementEnd. control_directives.ts is
changed to guarantee this:

- CONTROL_OP_CREATE_KINDS no longer includes ElementEnd, ContainerEnd or
  Template. ElementEnd/ContainerEnd would let the op attach after the closing
  tag (parent TNode), and Template restores the parent TNode as well, so none
  of them are valid insertion targets.
- findCreateInstruction now returns the *first* matching create op for a given
  target xref (ElementStart or Element) instead of the last one, so ControlCreate
  is always inserted immediately after the opening tag.

empty_elements.ts is intentionally left unchanged: ControlCreate is NOT added to
IGNORED_OP_KINDS. It must *block* the collapse of an empty ElementStart/ElementEnd
pair, otherwise the op would be re-parented to the collapsed element and lose the
correct TNode. As a result, an element carrying a control binding keeps its
explicit elementStart/elementEnd pair instead of collapsing to a single element()
instruction.

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_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', () => {