fix(forms): test that min/max properties are propagated to controls (angular#63884)

Fix a bug where the min property of a form field was not correctly
propagated to custom controls. Also ensure that min and max are only
bound to native input elements that support them.

PR Close angular#63884

Author: leonsenft

packages/core/src/render3/instructions/control.ts

@@ -332,7 +332,7 @@ function updateCustomControl(
   maybeWriteToDirectiveInput(componentDef, component, 'disabledReasons', state.disabledReasons);
   maybeWriteToDirectiveInput(componentDef, component, 'max', state.max);
   maybeWriteToDirectiveInput(componentDef, component, 'maxLength', state.maxLength);
-  maybeWriteToDirectiveInput(componentDef, component, 'min', state.max);
+  maybeWriteToDirectiveInput(componentDef, component, 'min', state.min);
   maybeWriteToDirectiveInput(componentDef, component, 'minLength', state.minLength);
   maybeWriteToDirectiveInput(componentDef, component, 'name', state.name);
   maybeWriteToDirectiveInput(componentDef, component, 'pattern', state.pattern);
@@ -368,7 +368,7 @@ function maybeWriteToDirectiveInput(
  * @param control The `ɵControl` directive instance.
  */
 function updateNativeControl(tNode: TNode, lView: LView, control: ɵControl<unknown>): void {
-  const input = getNativeByTNode(tNode, lView) as HTMLInputElement;
+  const input = getNativeByTNode(tNode, lView) as NativeControlElement;
   const renderer = lView[RENDERER];
   const state = control.state();
 
@@ -380,11 +380,16 @@ function updateNativeControl(tNode: TNode, lView: LView, control: ɵControl<unkn
   setBooleanAttribute(renderer, input, 'readonly', state.readonly());
   setBooleanAttribute(renderer, input, 'required', state.required());
 
+  // TODO: https://github.com/orgs/angular/projects/60/views/1?pane=issue&itemId=131711472
+  // * cache this in `tNode.flags`.
+  if (isNumericInput(input)) {
+    setOptionalAttribute(renderer, input, 'max', state.max());
+    setOptionalAttribute(renderer, input, 'min', state.min());
+  }
+
   // TODO: https://github.com/orgs/angular/projects/60/views/1?pane=issue&itemId=131711472
   // * use tag and type attribute to determine which of these properties to bind.
-  setOptionalAttribute(renderer, input, 'max', state.max());
   setOptionalAttribute(renderer, input, 'maxLength', state.maxLength());
-  setOptionalAttribute(renderer, input, 'min', state.min());
   setOptionalAttribute(renderer, input, 'minLength', state.minLength());
 }
 
@@ -393,6 +398,21 @@ function isDateOrNull(value: unknown): value is Date | null {
   return value === null || value instanceof Date;
 }
 
+/** Returns whether `control` has a numeric input type. */
+function isNumericInput(control: NativeControlElement) {
+  switch (control.type) {
+    case 'date':
+    case 'datetime-local':
+    case 'month':
+    case 'number':
+    case 'range':
+    case 'time':
+    case 'week':
+      return true;
+  }
+  return false;
+}
+
 /**
  * Returns the value from a native control element.
  *

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

@@ -299,6 +299,136 @@ describe('control directive', () => {
         expect(component.customControl().required()).toBe(true);
       });
     });
+
+    describe('max', () => {
+      it('native control', () => {
+        @Component({
+          imports: [Control],
+          template: `<input type="number" [control]="f">`,
+        })
+        class TestCmp {
+          readonly max = signal(10);
+          readonly f = form(signal(5), (p) => {
+            max(p, this.max);
+          });
+        }
+
+        const fixture = act(() => TestBed.createComponent(TestCmp));
+        const element = fixture.nativeElement.firstChild as HTMLInputElement;
+        expect(element.max).toBe('10');
+
+        act(() => fixture.componentInstance.max.set(5));
+        expect(element.max).toBe('5');
+      });
+
+      it('custom control', () => {
+        @Component({selector: 'custom-control', template: ``})
+        class CustomControl {
+          readonly value = model(0);
+          readonly max = input<number | null>(null);
+        }
+
+        @Component({
+          imports: [Control, CustomControl],
+          template: `<custom-control [control]="f" />`,
+        })
+        class TestCmp {
+          readonly max = signal(10);
+          readonly f = form(signal(5), (p) => {
+            max(p, this.max);
+          });
+          readonly customControl = viewChild.required(CustomControl);
+        }
+
+        const fixture = act(() => TestBed.createComponent(TestCmp));
+        const component = fixture.componentInstance;
+        expect(component.customControl().max()).toBe(10);
+
+        act(() => component.max.set(5));
+        expect(component.customControl().max()).toBe(5);
+      });
+
+      it('is not set on native control if type does not support it', () => {
+        @Component({
+          imports: [Control],
+          template: `<input type="text" [control]="f">`,
+        })
+        class TestCmp {
+          readonly f = form(signal(5), (p) => {
+            max(p, 10);
+          });
+        }
+
+        const fixture = act(() => TestBed.createComponent(TestCmp));
+        const element = fixture.nativeElement.firstChild as HTMLInputElement;
+        expect(element.max).toBe('');
+      });
+    });
+
+    describe('min', () => {
+      it('native control', () => {
+        @Component({
+          imports: [Control],
+          template: `<input type="number" [control]="f">`,
+        })
+        class TestCmp {
+          readonly min = signal(10);
+          readonly f = form(signal(15), (p) => {
+            min(p, this.min);
+          });
+        }
+
+        const fixture = act(() => TestBed.createComponent(TestCmp));
+        const element = fixture.nativeElement.firstChild as HTMLInputElement;
+        expect(element.min).toBe('10');
+
+        act(() => fixture.componentInstance.min.set(5));
+        expect(element.min).toBe('5');
+      });
+
+      it('custom control', () => {
+        @Component({selector: 'custom-control', template: ``})
+        class CustomControl {
+          readonly value = model(0);
+          readonly min = input<number>();
+        }
+
+        @Component({
+          imports: [Control, CustomControl],
+          template: `<custom-control [control]="f" />`,
+        })
+        class TestCmp {
+          readonly min = signal(10);
+          readonly f = form(signal(15), (p) => {
+            min(p, this.min);
+          });
+          readonly customControl = viewChild.required(CustomControl);
+        }
+
+        const fixture = act(() => TestBed.createComponent(TestCmp));
+        const component = fixture.componentInstance;
+        expect(component.customControl().min()).toBe(10);
+
+        act(() => component.min.set(5));
+        expect(component.customControl().min()).toBe(5);
+      });
+
+      it('is not set on native control if type does not support it', () => {
+        @Component({
+          imports: [Control],
+          template: `<input type="text" [control]="f">`,
+        })
+        class TestCmp {
+          readonly f = form(signal(15), (p) => {
+            min(p, 10);
+          });
+        }
+
+        const fixture = act(() => TestBed.createComponent(TestCmp));
+        const element = fixture.nativeElement.firstChild as HTMLInputElement;
+        expect(element.min).toBe('');
+      });
+    });
   });
 
   it('synchronizes a basic form with a custom control', () => {