fix(forms): resolved min and max validator issue

Resolved min and max validator issue as it wasn't working when value was set to 0. Partially closes #42267
angular · May 29, 2021 · e0ba47b · e0ba47b
1 parent 62b5a6c
commit e0ba47b
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 2 deletions.
diff --git a/packages/forms/src/directives/validators.ts b/packages/forms/src/directives/validators.ts
@@ -167,7 +167,7 @@ export const MAX_VALIDATOR: StaticProvider = {
   selector:
       'input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]',
   providers: [MAX_VALIDATOR],
-  host: {'[attr.max]': 'max ? max : null'}
+  host: {'[attr.max]': 'max ?? null'}
 })
 export class MaxValidator extends AbstractValidatorDirective implements OnChanges {
   /**
@@ -227,7 +227,7 @@ export const MIN_VALIDATOR: StaticProvider = {
   selector:
       'input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]',
   providers: [MIN_VALIDATOR],
-  host: {'[attr.min]': 'min ? min : null'}
+  host: {'[attr.min]': 'min ?? null'}
 })
 export class MinValidator extends AbstractValidatorDirective implements OnChanges {
   /**

diff --git a/packages/forms/test/reactive_integration_spec.ts b/packages/forms/test/reactive_integration_spec.ts
@@ -2560,6 +2560,18 @@ const ValueAccessorB = createControlValueAccessor('[cva-b]');
 
             expect(form.valid).toBeFalse();
             expect(form.controls.pin.errors).toEqual({max: {max: 1, actual: 2}});
+
+            fixture.componentInstance.min = 0;
+            fixture.componentInstance.max = 0;
+            fixture.detectChanges();
+            expect(form.valid).toBeFalse();
+            expect(form.controls.pin.errors).toEqual({max: {max: 0, actual: 2}});
+
+            input.value = 0;
+            dispatchEvent(input, 'input');
+            fixture.detectChanges();
+            expect(form.valid).toBeTruthy();
+            expect(form.controls.pin.errors).toBeNull();
           });
 
           it('should validate max for float number', () => {
@@ -2646,6 +2658,19 @@ const ValueAccessorB = createControlValueAccessor('[cva-b]');
             fixture.detectChanges();
             expect(form.valid).toBeFalse();
             expect(form.controls.pin.errors).toEqual({min: {min: 5, actual: 2}});
+
+            fixture.componentInstance.min = 0;
+            input.value = -5;
+            dispatchEvent(input, 'input');
+            fixture.detectChanges();
+            expect(form.valid).toBeFalse();
+            expect(form.controls.pin.errors).toEqual({min: {min: 0, actual: -5}});
+
+            input.value = 0;
+            dispatchEvent(input, 'input');
+            fixture.detectChanges();
+            expect(form.valid).toBeTruthy();
+            expect(form.controls.pin.errors).toBeNull();
           });
 
           it('should validate min for float number', () => {

diff --git a/packages/forms/test/template_integration_spec.ts b/packages/forms/test/template_integration_spec.ts
@@ -1538,6 +1538,20 @@ import {NgModelCustomComp, NgModelCustomWrapper} from './value_accessor_integrat
            fixture.detectChanges();
            expect(form.valid).toEqual(true);
            expect(form.controls.max.errors).toBeNull();
+
+           fixture.componentInstance.max = 0;
+           fixture.detectChanges();
+           tick();
+           dispatchEvent(input, 'input');
+           fixture.detectChanges();
+           expect(form.valid).toEqual(false);
+           expect(form.controls.max.errors).toEqual({max: {max: 0, actual: 9}});
+
+           input.value = 0;
+           dispatchEvent(input, 'input');
+           fixture.detectChanges();
+           expect(form.valid).toEqual(true);
+           expect(form.controls.max.errors).toBeNull();
          }));
 
       it('should validate max for float number', fakeAsync(() => {
@@ -1649,6 +1663,21 @@ import {NgModelCustomComp, NgModelCustomWrapper} from './value_accessor_integrat
            fixture.detectChanges();
            expect(form.valid).toEqual(false);
            expect(form.controls.min.errors).toEqual({min: {min: 10, actual: 9}});
+
+           fixture.componentInstance.min = 0;
+           fixture.detectChanges();
+           tick();
+           input.value = -5;
+           dispatchEvent(input, 'input');
+           fixture.detectChanges();
+           expect(form.valid).toEqual(false);
+           expect(form.controls.min.errors).toEqual({min: {min: 0, actual: -5}});
+
+           input.value = 0;
+           dispatchEvent(input, 'input');
+           fixture.detectChanges();
+           expect(form.valid).toEqual(true);
+           expect(form.controls.min.errors).toBeNull();
          }));
 
       it('should validate min for float number', fakeAsync(() => {