Skip to content
This repository was archived by the owner on Apr 12, 2024. It is now read-only.

Commit 3efc7b8

Browse files
committed
fix(input): validate minlength/maxlength for non-string values
Use viewValue for minlength/maxlength validation if model value is not a string. This allows ngMinlength and ngMaxlength to be used for number inputs.
1 parent 9475328 commit 3efc7b8

File tree

2 files changed

+99
-2
lines changed

2 files changed

+99
-2
lines changed

src/ng/directive/input.js

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2335,7 +2335,10 @@ var maxlengthDirective = function() {
23352335
maxlength = int(value) || 0;
23362336
ctrl.$validate();
23372337
});
2338-
ctrl.$validators.maxlength = function(value) {
2338+
ctrl.$validators.maxlength = function(value, viewValue) {
2339+
if (!isString(value)) {
2340+
value = viewValue;
2341+
}
23392342
return ctrl.$isEmpty(value) || value.length <= maxlength;
23402343
};
23412344
}
@@ -2354,7 +2357,10 @@ var minlengthDirective = function() {
23542357
minlength = int(value) || 0;
23552358
ctrl.$validate();
23562359
});
2357-
ctrl.$validators.minlength = function(value) {
2360+
ctrl.$validators.minlength = function(value, viewValue) {
2361+
if (!isString(value)) {
2362+
value = viewValue;
2363+
}
23582364
return ctrl.$isEmpty(value) || value.length >= minlength;
23592365
};
23602366
}

test/ng/directive/inputSpec.js

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2397,6 +2397,97 @@ describe('input', function() {
23972397
expect(scope.form.alias.$error.required).toBeTruthy();
23982398
});
23992399
});
2400+
2401+
describe('minlength', function() {
2402+
2403+
it('should invalidate values that are shorter than the given minlength', function() {
2404+
compileInput('<input type="number" ng-model="value" ng-minlength="3" />');
2405+
2406+
changeInputValueTo('12');
2407+
expect(inputElm).toBeInvalid();
2408+
2409+
changeInputValueTo('123');
2410+
expect(inputElm).toBeValid();
2411+
});
2412+
2413+
it('should listen on ng-minlength when minlength is observed', function() {
2414+
var value = 0;
2415+
compileInput('<input type="number" ng-model="value" ng-minlength="min" attr-capture />');
2416+
attrs.$observe('minlength', function(v) {
2417+
value = int(attrs.minlength);
2418+
});
2419+
2420+
scope.$apply(function() {
2421+
scope.min = 5;
2422+
});
2423+
2424+
expect(value).toBe(5);
2425+
});
2426+
2427+
it('should observe the standard minlength attribute and register it as a validator on the model', function() {
2428+
compileInput('<input type="number" name="input" ng-model="value" minlength="{{ min }}" />');
2429+
scope.$apply(function() {
2430+
scope.min = 10;
2431+
});
2432+
2433+
changeInputValueTo('12345');
2434+
expect(inputElm).toBeInvalid();
2435+
expect(scope.form.input.$error.minlength).toBe(true);
2436+
2437+
scope.$apply(function() {
2438+
scope.min = 5;
2439+
});
2440+
2441+
expect(inputElm).toBeValid();
2442+
expect(scope.form.input.$error.minlength).not.toBe(true);
2443+
});
2444+
});
2445+
2446+
2447+
describe('maxlength', function() {
2448+
2449+
it('should invalidate values that are longer than the given maxlength', function() {
2450+
compileInput('<input type="number" ng-model="value" ng-maxlength="5" />');
2451+
2452+
changeInputValueTo('12345678');
2453+
expect(inputElm).toBeInvalid();
2454+
2455+
changeInputValueTo('123');
2456+
expect(inputElm).toBeValid();
2457+
});
2458+
2459+
it('should listen on ng-maxlength when maxlength is observed', function() {
2460+
var value = 0;
2461+
compileInput('<input type="number" ng-model="value" ng-maxlength="max" attr-capture />');
2462+
attrs.$observe('maxlength', function(v) {
2463+
value = int(attrs.maxlength);
2464+
});
2465+
2466+
scope.$apply(function() {
2467+
scope.max = 10;
2468+
});
2469+
2470+
expect(value).toBe(10);
2471+
});
2472+
2473+
it('should observe the standard maxlength attribute and register it as a validator on the model', function() {
2474+
compileInput('<input type="number" name="input" ng-model="value" maxlength="{{ max }}" />');
2475+
scope.$apply(function() {
2476+
scope.max = 1;
2477+
});
2478+
2479+
changeInputValueTo('12345');
2480+
expect(inputElm).toBeInvalid();
2481+
expect(scope.form.input.$error.maxlength).toBe(true);
2482+
2483+
scope.$apply(function() {
2484+
scope.max = 6;
2485+
});
2486+
2487+
expect(inputElm).toBeValid();
2488+
expect(scope.form.input.$error.maxlength).not.toBe(true);
2489+
});
2490+
});
24002491
});
24012492

24022493
describe('email', function() {

0 commit comments

Comments
 (0)