fix(angular): align formField control binding with Angular

Angular's control-directives pipeline treats [formField] as a normal property binding and then inserts separate controlCreate/control instructions. Our Rust pipeline had drifted from that logic and rewrote [formField] into a custom ControlOp carrying the bound value, which emitted legacy output like ɵɵcontrol(ctx.myField, "formField") without ever writing the directive input via ɵɵproperty("formField", ...). In Angular 21 signal forms this leaves FormField.field unset and can surface as NG0950 at runtime.

This change restores the expected control flow for template bindings:
- keep [formField] as a regular PropertyOp
- emit a separate ControlOp after the property update
- reify ControlOp to zero-arg ɵɵcontrol()
- stop extracting duplicate const metadata from ControlOp itself

The tests now cover both the regression and Angular's mixed-order control fixture behavior:
- [formField] must emit ɵɵproperty("formField", ...) plus ɵɵcontrol()
- legacy ɵɵcontrol(value, "formField") output is rejected
- mixed [formField]/[value] bindings preserve update order
- extracted const metadata preserves per-element binding order

Verified with targeted cargo test runs for the new regression, control binding extraction, mixed property ordering, const ordering, pipe slot propagation, and the existing [field] non-control regression.

Author: Brooooooklyn

crates/oxc_angular_compiler/src/pipeline/phases/attribute_extraction.rs

@@ -237,25 +237,6 @@ fn process_view_attributes<'a>(
                     };
                     extracted_attrs.push((twp_op.target, extracted));
                 }
-                UpdateOp::Control(control_op) => {
-                    // Control bindings (e.g. [field]="...") also generate extracted
-                    // attributes for directive matching, similar to Property bindings.
-                    // Ported from Angular's attribute_extraction.ts lines 58-73.
-                    let extracted = ExtractedAttributeOp {
-                        base: CreateOpBase::default(),
-                        target: control_op.target,
-                        binding_kind: BindingKind::Property,
-                        namespace: None,
-                        name: control_op.name.clone(),
-                        value: None, // Control bindings don't copy the expression
-                        security_context: control_op.security_context,
-                        truthy_expression: false,
-                        i18n_context: None,
-                        i18n_message: None,
-                        trusted_value_fn: None, // Set by resolve_sanitizers phase
-                    };
-                    extracted_attrs.push((control_op.target, extracted));
-                }
                 // StyleProp and ClassProp bindings:
                 // In Angular TypeScript, these are only extracted in compatibility mode
                 // (TemplateDefinitionBuilder) when the expression is empty. We don't support

crates/oxc_angular_compiler/src/pipeline/phases/binding_specialization.rs

@@ -16,7 +16,7 @@
 //! Special cases:
 //! - `ngNonBindable` attribute: marks element and removes binding
 //! - `animate.*` attributes: convert to animation bindings
-//! - `field` property: convert to control binding
+//! - `formField` property: emit both a regular property binding and a control binding
 //!
 //! Ported from Angular's `template/pipeline/src/phases/binding_specialization.ts`.
 
@@ -301,20 +301,35 @@ fn specialize_in_view<'a>(
                             cursor.replace_current(new_op);
                         }
                     } else if name.as_str() == "formField" {
-                        // Check for special "formField" property (control binding)
+                        // [formField] still binds as a regular property, but Angular also emits
+                        // a separate control instruction after the property update.
                         if let Some(UpdateOp::Binding(binding)) = cursor.current_mut() {
                             let expression = std::mem::replace(
                                 &mut binding.expression,
                                 create_placeholder_expression(allocator),
                             );
-                            let new_op = UpdateOp::Control(ControlOp {
+                            let property_op = UpdateOp::Property(PropertyOp {
                                 base: UpdateOpBase { source_span, ..Default::default() },
                                 target,
                                 name: binding.name.clone(),
                                 expression,
+                                is_host: false, // Template mode
+                                security_context,
+                                sanitizer: None,
+                                is_structural: false,
+                                i18n_context: None,
+                                i18n_message: binding.i18n_message,
+                                binding_kind,
+                            });
+                            let control_op = UpdateOp::Control(ControlOp {
+                                base: UpdateOpBase { source_span, ..Default::default() },
+                                target,
+                                name: binding.name.clone(),
+                                expression: create_placeholder_expression(allocator),
                                 security_context,
                             });
-                            cursor.replace_current(new_op);
+                            cursor.replace_current(property_op);
+                            cursor.insert_after(control_op);
                         }
                     } else {
                         // Regular property binding

crates/oxc_angular_compiler/src/pipeline/phases/reify/mod.rs

@@ -1073,10 +1073,7 @@ fn reify_update_op<'a>(
             let expr = convert_ir_expression(allocator, &anim.expression, expressions, root_xref);
             Some(create_animation_binding_stmt(allocator, &anim.name, expr))
         }
-        UpdateOp::Control(ctrl) => {
-            let expr = convert_ir_expression(allocator, &ctrl.expression, expressions, root_xref);
-            Some(create_control_stmt(allocator, expr, &ctrl.name))
-        }
+        UpdateOp::Control(_) => Some(create_control_stmt(allocator)),
         UpdateOp::Variable(var) => {
             // Emit variable declaration with initializer for update phase
             // All Variable ops use `const` (StmtModifier::Final), matching Angular's reify.ts

crates/oxc_angular_compiler/src/pipeline/phases/reify/statements/misc.rs

@@ -377,26 +377,11 @@ pub fn create_animation_binding_stmt<'a>(
 
 /// Creates a control binding call statement (ɵɵcontrol).
 ///
-/// The control instruction takes:
-/// - expression: The expression to evaluate for the control value
-/// - name: The property name as a string literal
-/// - sanitizer: Optional sanitizer (only if not null)
-///
-/// Note: Unlike property() which takes (name, expression), control() takes (expression, name).
-/// Ported from Angular's `control()` in `instruction.ts` lines 598-614.
-pub fn create_control_stmt<'a>(
-    allocator: &'a oxc_allocator::Allocator,
-    value: OutputExpression<'a>,
-    name: &Ident<'a>,
-) -> OutputStatement<'a> {
-    let mut args = OxcVec::new_in(allocator);
-    args.push(value);
-    args.push(OutputExpression::Literal(Box::new_in(
-        LiteralExpr { value: LiteralValue::String(name.clone()), source_span: None },
-        allocator,
-    )));
-    // Note: sanitizer would be pushed here if not null, but it's always null for ControlOp
-    create_instruction_call_stmt(allocator, Identifiers::CONTROL, args)
+/// Angular's control update instruction takes no arguments. The `[formField]`
+/// value is written through the regular property instruction, and `ɵɵcontrol()`
+/// performs the form-control synchronization work separately.
+pub fn create_control_stmt<'a>(allocator: &'a oxc_allocator::Allocator) -> OutputStatement<'a> {
+    create_instruction_call_stmt(allocator, Identifiers::CONTROL, OxcVec::new_in(allocator))
 }
 
 /// Creates an ɵɵprojectionDef() call statement from a pre-built R3 def expression.

crates/oxc_angular_compiler/src/pipeline/phases/var_counting.rs

@@ -230,8 +230,10 @@ fn vars_used_by_update_op(
             1
         }
         UpdateOp::Control(_) => {
-            // Control bindings use 2 slots (one for value, one for bound states)
-            2
+            // Angular's ControlOp does not implement ConsumesVarsTrait, so it does not
+            // contribute any top-level variable slots. The bound [formField] value is
+            // accounted for by the PropertyOp that precedes it.
+            0
         }
         UpdateOp::Conditional(_) => 1,
         UpdateOp::StoreLet(_) => 1,