fix(forms): allow late-bound input types for signals forms

Ensure that input [type] bindings are evaluated dynamically rather than cached eagerly during initialization. This allows late-bound expressions for input types to correctly apply constraints like min/max and maxLength.

Fixes angular#66987

Author: alxhub

packages/forms/signals/src/directive/form_field.ts

@@ -131,8 +131,8 @@ export class FormField<T> {
 
   // Compute some helper booleans about the type of element we're sitting on.
   private readonly elementIsNativeFormElement = isNativeFormElement(this.element);
-  private readonly elementAcceptsNumericValues = isNumericFormElement(this.element);
   private readonly elementAcceptsTextualValues = isTextualFormElement(this.element);
+  private _elementAcceptsNumericValues: boolean | undefined;
 
   /**
    * Utility that casts `this.element` to `NativeFormControl` to avoid repeated type guards. Only
@@ -360,7 +360,8 @@ export class FormField<T> {
     switch (key) {
       case 'min':
       case 'max':
-        return this.elementAcceptsNumericValues;
+        return (this._elementAcceptsNumericValues ??= isNumericFormElement(this.element));
+
       case 'minLength':
       case 'maxLength':
         return this.elementAcceptsTextualValues;

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

@@ -2633,6 +2633,25 @@ describe('field directive', () => {
         expect(element.min).toBe('5');
       });
 
+      it('should apply min/max if type is late-bound to a numeric type during initialization', () => {
+        @Component({
+          imports: [FormField],
+          template: `<input [type]="inputType()" [formField]="f" />`,
+        })
+        class TestCmp {
+          readonly inputType = signal('number');
+          readonly min = signal(10);
+          readonly f = form(signal(15), (p) => {
+            min(p, this.min);
+          });
+        }
+
+        const fixture = act(() => TestBed.createComponent(TestCmp));
+        const input = fixture.nativeElement.firstChild as HTMLInputElement;
+
+        expect(input.min).toBe('10');
+      });
+
       it('should bind to a custom control host directive', () => {
         @Directive()
         class CustomControlDir implements FormValueControl<number> {
@@ -3021,6 +3040,24 @@ describe('field directive', () => {
         expect(element.getAttribute('maxlength')).toBeNull();
       });
 
+      it('should apply maxLength if type is late-bound to a textual type during initialization', () => {
+        @Component({
+          imports: [FormField],
+          template: `<input [type]="inputType()" [formField]="f" />`,
+        })
+        class TestCmp {
+          readonly inputType = signal('email');
+          readonly f = form(signal('abc'), (p) => {
+            maxLength(p, 10);
+          });
+        }
+
+        const fixture = act(() => TestBed.createComponent(TestCmp));
+        const input = fixture.nativeElement.firstChild as HTMLInputElement;
+
+        expect(input.maxLength).toBe(10);
+      });
+
       it('should be reset when field changes on native control', () => {
         @Component({
           imports: [FormField],