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

fix(mdInput): Fix md-maxlength when used with ng-messages. #4786

Closed
wants to merge 1 commit into from
Closed

fix(mdInput): Fix md-maxlength when used with ng-messages. #4786

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
2 changes: 1 addition & 1 deletion src/components/input/demoErrors/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ <h1 class="md-toolbar-tools">
<md-input-container>
<label>Hourly Rate (USD)</label>
<input required type="number" step="any" name="rate" ng-model="project.rate" min="800"
max="4999" ng-pattern="/^1234$/">
max="4999" ng-pattern="/^1234$/" md-maxlength="20" />

<div ng-messages="projectForm.rate.$error" multiple>
<div ng-message="required">
Expand Down
4 changes: 3 additions & 1 deletion src/components/input/input-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,9 @@ md-input-container.md-THEME_NAME-theme {
ng-message, data-ng-message, x-ng-message,
[ng-message], [data-ng-message], [x-ng-message],
[ng-message-exp], [data-ng-message-exp], [x-ng-message-exp] {
color: '{{warn-500}}';
:not(.md-char-counter) {
color: '{{warn-500}}';
}
}

&:not(.md-input-invalid) {
Expand Down
20 changes: 19 additions & 1 deletion src/components/input/input.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -362,7 +362,25 @@ function mdMaxlengthDirective($animate) {
// Stop model from trimming. This makes it so whitespace
// over the maxlength still counts as invalid.
attr.$set('ngTrim', 'false');
input.after(charCountEl);

var ngMessagesSelectors = [
'ng-messages',
'data-ng-messages',
'x-ng-messages',
'[ng-messages]',
'[data-ng-messages]',
'[x-ng-messages]'
];
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would it be easier to make a directive that registers itself with this than duplicating all these syntaxes from Angular?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you mean a .value( ) service to manage this array of constants ?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@jelbourn You mean an ng-messages directive that requires the md-input-container and registers itself with the container; then this directive just asks the container if there are any messages.

That definitely sounds a bit cleaner; I'll take a look. I think we already have one I can reuse...

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yep, that's what I meant.


var ngMessages = containerCtrl.element[0].querySelector(ngMessagesSelectors.join(','));

// If we have an ngMessages container, put the counter at the top; otherwise, put it after the
// input so it will be positioned properly in the SCSS
if (ngMessages) {
angular.element(ngMessages).prepend(charCountEl);
} else {
input.after(charCountEl);
}

ngModelCtrl.$formatters.push(renderCharCount);
ngModelCtrl.$viewChangeListeners.push(renderCharCount);
Expand Down
10 changes: 8 additions & 2 deletions src/components/input/input.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -166,8 +166,8 @@ md-input-container {
}

.md-char-counter {
position: absolute;
right: 0;
position: relative;
text-align: right;
order: 3;
}

Expand All @@ -176,6 +176,12 @@ md-input-container {
position: relative;
order: 4;
min-height: $input-error-height;

.md-char-counter {
position: absolute;
top: 0;
right: 0;
}
}

ng-message, data-ng-message, x-ng-message,
Expand Down