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

Commit 388a340

Browse files
theLufenkmmalerba
authored andcommitted
feat(autocomplete): pass md-input-max/min-length to the input with non-floating label (#9964)
Adds the md-input-minlength and md-input-maxlength attributes as ng-minlength and ng-maxlength to the input element of the autocomplete directive when a floating label is not used. A use case : It would help in validating the input when the value of Search Text is being used if no matches are found. Added Unit tests for md-input-maxlength and md-input-minlength
1 parent 72264af commit 388a340

File tree

2 files changed

+98
-1
lines changed

2 files changed

+98
-1
lines changed

src/components/autocomplete/autocomplete.spec.js

Lines changed: 96 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -596,7 +596,7 @@ describe('<md-autocomplete>', function() {
596596

597597
describe('md-input-maxlength', function() {
598598

599-
it('should correctly set the form to invalid', inject(function($timeout) {
599+
it('should correctly set the form to invalid if floating label is present', inject(function($timeout) {
600600
var scope = createScope(null, {inputId: 'custom-input-id'});
601601
var template =
602602
'<form name="testForm">' +
@@ -627,6 +627,35 @@ describe('<md-autocomplete>', function() {
627627
element.remove();
628628
}));
629629

630+
it('should correctly set the form to invalid when no floating label is present', inject(function($timeout) {
631+
var scope = createScope(null, {inputId: 'custom-input-id'});
632+
var template =
633+
'<form name="testForm">' +
634+
'<md-autocomplete ' +
635+
'md-input-id="{{inputId}}" ' +
636+
'md-input-maxlength="5" ' +
637+
'md-input-name="testAutocomplete" ' +
638+
'md-selected-item="selectedItem" ' +
639+
'md-search-text="searchText" ' +
640+
'md-items="item in match(searchText)" ' +
641+
'md-item-text="item.display" >' +
642+
'<span md-highlight-text="searchText">{{item.display}}</span>' +
643+
'</md-autocomplete>' +
644+
'</form>';
645+
646+
var element = compile(template, scope);
647+
var input = element.find('input');
648+
649+
expect(scope.searchText).toBe('');
650+
expect(scope.testForm.$valid).toBe(true);
651+
652+
scope.$apply('searchText = "Exceeded"');
653+
654+
expect(scope.testForm.$valid).toBe(false);
655+
656+
element.remove();
657+
}));
658+
630659
it('should not clear the view value if the input is invalid', inject(function($timeout) {
631660
var scope = createScope(null, {inputId: 'custom-input-id'});
632661
var template =
@@ -663,6 +692,72 @@ describe('<md-autocomplete>', function() {
663692

664693
});
665694

695+
describe('md-input-minlength', function() {
696+
697+
it('should correctly set the form to invalid when floating label is present', inject(function($timeout) {
698+
var scope = createScope(null, {inputId: 'custom-input-id'});
699+
var template =
700+
'<form name="testForm">' +
701+
'<md-autocomplete ' +
702+
'md-input-id="{{inputId}}" ' +
703+
'md-input-minlength="4" ' +
704+
'md-input-name="testAutocomplete" ' +
705+
'md-selected-item="selectedItem" ' +
706+
'md-search-text="searchText" ' +
707+
'md-items="item in match(searchText)" ' +
708+
'md-item-text="item.display" ' +
709+
'tabindex="3"' +
710+
'md-floating-label="Favorite state">' +
711+
'<span md-highlight-text="searchText">{{item.display}}</span>' +
712+
'</md-autocomplete>' +
713+
'</form>';
714+
715+
var element = compile(template, scope);
716+
var input = element.find('input');
717+
718+
scope.$apply('searchText = "abc"');
719+
720+
expect(scope.testForm.$valid).toBe(false);
721+
722+
scope.$apply('searchText = "abcde"');
723+
724+
expect(scope.testForm.$valid).toBe(true);
725+
726+
element.remove();
727+
}));
728+
729+
it('should correctly set the form to invalid when no floating label is present', inject(function($timeout) {
730+
var scope = createScope(null, {inputId: 'custom-input-id'});
731+
var template =
732+
'<form name="testForm">' +
733+
'<md-autocomplete ' +
734+
'md-input-id="{{inputId}}" ' +
735+
'md-input-minlength="4" ' +
736+
'md-input-name="testAutocomplete" ' +
737+
'md-selected-item="selectedItem" ' +
738+
'md-search-text="searchText" ' +
739+
'md-items="item in match(searchText)" ' +
740+
'md-item-text="item.display" >' +
741+
'<span md-highlight-text="searchText">{{item.display}}</span>' +
742+
'</md-autocomplete>' +
743+
'</form>';
744+
745+
var element = compile(template, scope);
746+
var input = element.find('input');
747+
748+
scope.$apply('searchText = "abc"');
749+
750+
expect(scope.testForm.$valid).toBe(false);
751+
752+
scope.$apply('searchText = "abcde"');
753+
754+
expect(scope.testForm.$valid).toBe(true);
755+
756+
element.remove();
757+
}));
758+
759+
});
760+
666761
describe('md-escape-options checks', function() {
667762
var scope, ctrl, element;
668763
var template = '\

src/components/autocomplete/js/autocompleteDirective.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -376,6 +376,8 @@ function MdAutocomplete ($$mdSvgRegistry) {
376376
ng-required="$mdAutocompleteCtrl.isRequired"\
377377
ng-disabled="$mdAutocompleteCtrl.isDisabled"\
378378
ng-readonly="$mdAutocompleteCtrl.isReadonly"\
379+
ng-minlength="inputMinlength"\
380+
ng-maxlength="inputMaxlength"\
379381
ng-model="$mdAutocompleteCtrl.scope.searchText"\
380382
ng-keydown="$mdAutocompleteCtrl.keydown($event)"\
381383
ng-blur="$mdAutocompleteCtrl.blur($event)"\

0 commit comments

Comments
 (0)