fix(forms): allow dynamic type bindings on signal form controls

leonsenft · kirjs · commit 8acf5d27563e · 2025-11-25T09:16:01.000-05:00
The type checker will no longer prohibit binding the Signal Forms `[field]` directive to an input with a dynamic `[attr.type]` or `[type]` binding. (cherry picked from commit 3a1eb07)
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
@@ -80,7 +80,6 @@ export class TcbNativeFieldDirectiveTypeOp extends TcbOp {
     ...formControlInputFields,
     'value',
     'checked',
-    'type',
     'maxlength',
     'minlength',
   ]);
@@ -373,10 +372,7 @@ export function checkUnsupportedFieldBindings(
 
   if (!(node instanceof TmplAstHostElement)) {
     for (const attr of node.attributes) {
-      const name = attr.name.toLowerCase();
-
-      // `type` is allowed to be a static attribute.
-      if (name !== 'type' && unsupportedBindingFields.has(name)) {
+      if (unsupportedBindingFields.has(attr.name.toLowerCase())) {
         tcb.oobRecorder.formFieldUnsupportedBinding(tcb.id, attr);
       }
     }
diff --git a/packages/compiler-cli/test/ngtsc/signal_forms_spec.ts b/packages/compiler-cli/test/ngtsc/signal_forms_spec.ts
@@ -305,20 +305,20 @@ runInEachFileSystem(() => {
           import {Field, form} from '@angular/forms/signals';
 
           @Component({
-            template: '<input [attr.type]="type" [field]="f"/>',
+            template: '<input [field]="f" [attr.maxlength]="maxLength"/>',
             imports: [Field]
           })
           export class Comp {
             f = form(signal(''));
-            type = 'number';
+            maxLength = 10;
           }
         `,
       );
 
       const diags = env.driveDiagnostics();
       expect(diags.length).toBe(1);
       expect(extractMessage(diags[0])).toBe(
-        `Binding to '[attr.type]' is not allowed on nodes using the '[field]' directive`,
+        `Binding to '[attr.maxlength]' is not allowed on nodes using the '[field]' directive`,
       );
     });
 
diff --git a/packages/forms/signals/test/web/field_directive.spec.ts b/packages/forms/signals/test/web/field_directive.spec.ts
@@ -8,6 +8,7 @@
 
 import {
   Component,
+  computed,
   Directive,
   ElementRef,
   inject,
@@ -2092,6 +2093,51 @@ describe('field directive', () => {
       });
       expect(cmp.f().value()).toBe('#0000ff');
     });
+
+    it('should sync string field with dynamically typed input', () => {
+      @Component({
+        imports: [Field],
+        template: `<input [type]="type()" [field]="f">`,
+      })
+      class TestCmp {
+        readonly passwordVisible = signal(false);
+        readonly type = computed(() => (this.passwordVisible() ? 'text' : 'password'));
+        f = form(signal(''));
+      }
+
+      const fix = act(() => TestBed.createComponent(TestCmp));
+      const input = fix.nativeElement.firstChild as HTMLInputElement;
+      const cmp = fix.componentInstance as TestCmp;
+
+      // Initial state
+      expect(input.type).toBe('password');
+
+      // Model -> View as password
+      act(() => cmp.f().value.set('123'));
+      expect(input.value).toBe('123');
+
+      // View -> Model as password
+      act(() => {
+        input.value = 'abc';
+        input.dispatchEvent(new Event('input'));
+      });
+      expect(cmp.f().value()).toBe('abc');
+
+      // Change input type
+      act(() => cmp.passwordVisible.set(true));
+      expect(input.type).toBe('text');
+
+      // Model -> View as text
+      act(() => cmp.f().value.set('123'));
+      expect(input.value).toBe('123');
+
+      // View -> Model as text
+      act(() => {
+        input.value = 'abc';
+        input.dispatchEvent(new Event('input'));
+      });
+      expect(cmp.f().value()).toBe('abc');
+    });
   });
 
   describe('should be marked dirty by user interaction', () => {
