fix(compiler-cli): check that field radio button values are strings

crisbeto · pkozlowski-opensource · commit 6773d3b97d07 · 2025-12-03T12:18:57.000+01:00
Adds some type checking code which verifies that the bound `value` on a `Field` radio button is a string. Fixes #65726.
diff --git a/packages/compiler-cli/src/ngtsc/typecheck/src/ops/scope.ts b/packages/compiler-cli/src/ngtsc/typecheck/src/ops/scope.ts
@@ -56,7 +56,8 @@ import {
   getCustomFieldDirectiveType,
   isFieldDirective,
   isNativeField,
-  TcbNativeFieldDirectiveTypeOp,
+  TcbNativeFieldOp,
+  TcbNativeRadioButtonFieldOp,
 } from './signal_forms';
 import {Reference} from '../../../imports';
 import {ClassDeclaration} from '../../../reflection';
@@ -774,7 +775,15 @@ export class Scope {
     dirMap.set(dir, dirIndex);
 
     if (isNativeField(dir, node, allDirectiveMatches)) {
-      this.opQueue.push(new TcbNativeFieldDirectiveTypeOp(this.tcb, this, node as TmplAstElement));
+      const inputType =
+        (node.name === 'input' && node.attributes.find((attr) => attr.name === 'type')?.value) ||
+        null;
+
+      this.opQueue.push(
+        inputType === 'radio'
+          ? new TcbNativeRadioButtonFieldOp(this.tcb, this, node)
+          : new TcbNativeFieldOp(this.tcb, this, node, inputType),
+      );
     }
 
     this.opQueue.push(new TcbDirectiveInputsOp(this.tcb, this, node, dir, customFieldType));
diff --git a/packages/compiler-cli/src/ngtsc/typecheck/src/ops/signal_forms.ts b/packages/compiler-cli/src/ngtsc/typecheck/src/ops/signal_forms.ts
@@ -74,7 +74,7 @@ const formControlOptionalFields = new Set([
 /**
  * A `TcbOp` which constructs an instance of the signal forms `Field` directive on a native element.
  */
-export class TcbNativeFieldDirectiveTypeOp extends TcbOp {
+export class TcbNativeFieldOp extends TcbOp {
   /** Bindings that aren't supported on signal form fields. */
   protected readonly unsupportedBindingFields = new Set([
     ...formControlInputFields,
@@ -84,27 +84,17 @@ export class TcbNativeFieldDirectiveTypeOp extends TcbOp {
     'minlength',
   ]);
 
-  private readonly inputType: string | null;
-
   override get optional() {
     return false;
   }
 
   constructor(
-    private tcb: Context,
-    private scope: Scope,
-    private node: TmplAstElement,
+    protected tcb: Context,
+    protected scope: Scope,
+    protected node: TmplAstElement,
+    private inputType: string | null,
   ) {
     super();
-
-    this.inputType =
-      (node.name === 'input' && node.attributes.find((attr) => attr.name === 'type')?.value) ||
-      null;
-
-    // Radio controls are allowed to set the `value`.
-    if (this.inputType === 'radio') {
-      this.unsupportedBindingFields.delete('value');
-    }
   }
 
   override execute(): null {
@@ -120,11 +110,7 @@ export class TcbNativeFieldDirectiveTypeOp extends TcbOp {
 
     checkUnsupportedFieldBindings(this.node, this.unsupportedBindingFields, this.tcb);
 
-    const expectedType =
-      this.node instanceof TmplAstElement
-        ? this.getExpectedTypeFromDomNode(this.node)
-        : this.getUnsupportedType();
-
+    const expectedType = this.getExpectedTypeFromDomNode(this.node);
     const value = extractFieldValue(fieldBinding.value, this.tcb, this.scope);
 
     // Create a variable with the expected type and check that the field value is assignable, e.g.
@@ -180,6 +166,38 @@ export class TcbNativeFieldDirectiveTypeOp extends TcbOp {
   }
 }
 
+/**
+ * A variation of the `TcbNativeFieldOp` with specific logic for radio buttons.
+ */
+export class TcbNativeRadioButtonFieldOp extends TcbNativeFieldOp {
+  constructor(tcb: Context, scope: Scope, node: TmplAstElement) {
+    super(tcb, scope, node, 'radio');
+    this.unsupportedBindingFields.delete('value');
+  }
+
+  override execute(): null {
+    super.execute();
+
+    const valueBinding = this.node.inputs.find((attr) => {
+      return attr.type === BindingType.Property && attr.name === 'value';
+    });
+
+    if (valueBinding !== undefined) {
+      // Include an additional expression to check that the `value` is a string.
+      const id = this.tcb.allocateId();
+      const value = tcbExpression(valueBinding.value, this.tcb, this.scope);
+      const assignment = ts.factory.createBinaryExpression(id, ts.SyntaxKind.EqualsToken, value);
+      addParseSpanInfo(assignment, valueBinding.sourceSpan);
+      this.scope.addStatement(
+        tsDeclareVariable(id, ts.factory.createKeywordTypeNode(ts.SyntaxKind.StringKeyword)),
+      );
+      this.scope.addStatement(ts.factory.createExpressionStatement(assignment));
+    }
+
+    return null;
+  }
+}
+
 /** Expands the set of bound inputs with the ones from custom field directives. */
 export function expandBoundAttributesForField(
   directive: TypeCheckableDirectiveMeta,
@@ -319,7 +337,7 @@ export function isNativeField(
   dir: TypeCheckableDirectiveMeta,
   node: TmplAstNode,
   allDirectiveMatches: TypeCheckableDirectiveMeta[],
-): boolean {
+): node is TmplAstElement & {name: 'input' | 'select' | 'textarea'} {
   // Only applies to the `Field` directive.
   if (!isFieldDirective(dir)) {
     return false;
diff --git a/packages/compiler-cli/src/ngtsc/typecheck/test/type_check_block_spec.ts b/packages/compiler-cli/src/ngtsc/typecheck/test/type_check_block_spec.ts
@@ -2625,6 +2625,16 @@ describe('type check blocks', () => {
       });
     });
 
+    it('should generate expressions to check the field and value bindings of a radio input', () => {
+      const block = tcb('<input type="radio" [field]="f" [value]="expr"/>', [FieldMock]);
+      expect(block).toContain('var _t1 = null! as string;');
+      expect(block).toContain('_t1 = ((this).f)().value();');
+      expect(block).toContain('var _t2 = null! as string;');
+      expect(block).toContain('_t2 = ((this).expr);');
+      expect(block).toContain('var _t3 = null! as i0.Field;');
+      expect(block).toContain('_t3.field = (((this).f));');
+    });
+
     it('should generate a string field for a textarea', () => {
       const block = tcb('<textarea [field]="f"></textarea>', [FieldMock]);
       expect(block).toContain('var _t1 = null! as string;');
diff --git a/packages/compiler-cli/test/ngtsc/signal_forms_spec.ts b/packages/compiler-cli/test/ngtsc/signal_forms_spec.ts
@@ -379,6 +379,33 @@ runInEachFileSystem(() => {
       expect(diags.length).toBe(0);
     });
 
+    it('should check that the radio button value is a string', () => {
+      env.write(
+        'test.ts',
+        `
+          import {Component, signal} from '@angular/core';
+          import {Field, form} from '@angular/forms/signals';
+
+          @Component({
+            template: \`
+              <form>
+                <input type="radio" [value]="num" [field]="f">
+              </form>
+            \`,
+            imports: [Field]
+          })
+          export class Comp {
+            f = form(signal('a'), {name: 'test'});
+            num = 1;
+          }
+        `,
+      );
+
+      const diags = env.driveDiagnostics();
+      expect(diags.length).toBe(1);
+      expect(diags[0].messageText).toBe(`Type 'number' is not assignable to type 'string'.`);
+    });
+
     it('should report unsupported static attributes of a field', () => {
       env.write(
         'test.ts',
