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

fix(input): validate minlength/maxlength for non-string values #7968

Closed
wants to merge 1 commit into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 10 additions & 4 deletions src/ng/directive/input.js
Original file line number Diff line number Diff line change
Expand Up @@ -2473,8 +2473,11 @@ var maxlengthDirective = function() {
maxlength = int(value) || 0;
ctrl.$validate();
});
ctrl.$validators.maxlength = function(value) {
return ctrl.$isEmpty(value) || value.length <= maxlength;
ctrl.$validators.maxlength = function(modelValue, viewValue) {
if (!isString(modelValue)) {
modelValue = viewValue;
}
return ctrl.$isEmpty(modelValue) || modelValue.length <= maxlength;
};
}
};
Expand All @@ -2492,8 +2495,11 @@ var minlengthDirective = function() {
minlength = int(value) || 0;
ctrl.$validate();
});
ctrl.$validators.minlength = function(value) {
return ctrl.$isEmpty(value) || value.length >= minlength;
ctrl.$validators.minlength = function(modelValue, viewValue) {
if (!isString(modelValue)) {
modelValue = viewValue;
}
return ctrl.$isEmpty(modelValue) || modelValue.length >= minlength;
};
}
};
Expand Down
91 changes: 91 additions & 0 deletions test/ng/directive/inputSpec.js
Original file line number Diff line number Diff line change
Expand Up @@ -2909,6 +2909,97 @@ describe('input', function() {
expect(scope.form.alias.$error.required).toBeTruthy();
});
});

describe('minlength', function() {

it('should invalidate values that are shorter than the given minlength', function() {
compileInput('<input type="number" ng-model="value" ng-minlength="3" />');

changeInputValueTo('12');
expect(inputElm).toBeInvalid();

changeInputValueTo('123');
expect(inputElm).toBeValid();
});

it('should listen on ng-minlength when minlength is observed', function() {
var value = 0;
compileInput('<input type="number" ng-model="value" ng-minlength="min" attr-capture />');
attrs.$observe('minlength', function(v) {
value = int(attrs.minlength);
});

scope.$apply(function() {
scope.min = 5;
});

expect(value).toBe(5);
});

it('should observe the standard minlength attribute and register it as a validator on the model', function() {
compileInput('<input type="number" name="input" ng-model="value" minlength="{{ min }}" />');
scope.$apply(function() {
scope.min = 10;
});

changeInputValueTo('12345');
expect(inputElm).toBeInvalid();
expect(scope.form.input.$error.minlength).toBe(true);

scope.$apply(function() {
scope.min = 5;
});

expect(inputElm).toBeValid();
expect(scope.form.input.$error.minlength).not.toBe(true);
});
});


describe('maxlength', function() {

it('should invalidate values that are longer than the given maxlength', function() {
compileInput('<input type="number" ng-model="value" ng-maxlength="5" />');

changeInputValueTo('12345678');
expect(inputElm).toBeInvalid();

changeInputValueTo('123');
expect(inputElm).toBeValid();
});

it('should listen on ng-maxlength when maxlength is observed', function() {
var value = 0;
compileInput('<input type="number" ng-model="value" ng-maxlength="max" attr-capture />');
attrs.$observe('maxlength', function(v) {
value = int(attrs.maxlength);
});

scope.$apply(function() {
scope.max = 10;
});

expect(value).toBe(10);
});

it('should observe the standard maxlength attribute and register it as a validator on the model', function() {
compileInput('<input type="number" name="input" ng-model="value" maxlength="{{ max }}" />');
scope.$apply(function() {
scope.max = 1;
});

changeInputValueTo('12345');
expect(inputElm).toBeInvalid();
expect(scope.form.input.$error.maxlength).toBe(true);

scope.$apply(function() {
scope.max = 6;
});

expect(inputElm).toBeValid();
expect(scope.form.input.$error.maxlength).not.toBe(true);
});
});
});

describe('email', function() {
Expand Down