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

Commit cf7f21a

Browse files
topherfangiojelbourn
topherfangio
authored and
jelbourn
committed
fix(input): ngMessages jump with ngShow, ngIf, etc
When the ngMessages directive was used with the ngShow, ngIf and other directives inside of an md-input-container, the messages would flicker and jump rather than properly animating. Additionally, if the messages spanned multiple lines, the animations were incorrect due to hard-coded values. Fix many styles and move animations into JS so we can properly calculate message heights. Also, add more flexibility with the `md-auto-hide` CSS class and associated attribute and update docs/demo accordingly. BREAKING CHANGE By default, the `<md-input-container>` now automatically hides any error messages until the component is in an error state (determined by `md-is-error`). If you wish to achieve the original behavior where messages are always visible, add the `md-auto-hide="false"` attribute to your `ng-messages` or use one of the following visibility directives: - `ng-if` - `ng-show`/`ng-hide` - `ng-switch-when`/`ng-switch-default` Fixes #5298. Closes #6164
1 parent 6acd1c3 commit cf7f21a

File tree

10 files changed

+575
-136
lines changed

10 files changed

+575
-136
lines changed

‎src/components/input/demoErrors/index.html

+2-1
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22

33
<md-content layout-padding>
44
<form name="projectForm">
5+
56
<md-input-container class="md-block">
67
<label>Description</label>
78
<input md-maxlength="30" required name="description" ng-model="project.description">
@@ -36,7 +37,7 @@
3637
<input required type="number" step="any" name="rate" ng-model="project.rate" min="800"
3738
max="4999" ng-pattern="/^1234$/" md-maxlength="20" />
3839

39-
<div ng-messages="projectForm.rate.$error" multiple>
40+
<div ng-messages="projectForm.rate.$error" multiple md-auto-hide="false">
4041
<div ng-message="required">
4142
You've got to charge something! You can't just <b>give away</b> a Missile Defense
4243
System.

‎src/components/input/demoErrorsAdvanced/index.html

+106
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
<div ng-controller="AppCtrl" layout="column" ng-cloak>
2+
3+
<md-content layout-padding>
4+
<form name="userForm">
5+
<div layout="row" layout-xs="column" layout-sm="column" layout-align="space-between center">
6+
<div flex-gt-sm="80">
7+
<p>
8+
The <code>md-input-container</code> gives you the flexibility to display your messages
9+
using many standard angular directives.
10+
</p>
11+
12+
<p>
13+
For instance, toggle the switch
14+
15+
<span hide-xs hide-sm>to the right</span>
16+
<span hide-gt-sm>below</span>
17+
18+
to see the messages switch between some custom hints, and the actual error messages.
19+
Note that some of the <code>ng-messages</code> containers use <code>ngIf</code> while
20+
others use <code>ng-show</code> or <code>ng-hide</code>.
21+
</p>
22+
</div>
23+
24+
<md-input-container>
25+
<md-switch ng-model="showHints">Showing {{showHints ? "Hints" : "Errors"}}</md-switch>
26+
</md-input-container>
27+
</div>
28+
29+
<div layout-gt-sm="row">
30+
31+
<md-input-container class="md-block" flex-gt-sm>
32+
<label>Name</label>
33+
<input md-maxlength="30" required name="name" ng-model="user.name" />
34+
35+
<div class="hint" ng-if="showHints">Tell us what we should call you!</div>
36+
37+
<div ng-messages="userForm.name.$error" ng-if="!showHints">
38+
<div ng-message="required">Name is required.</div>
39+
<div ng-message="md-maxlength">The name has to be less than 30 characters long.</div>
40+
</div>
41+
</md-input-container>
42+
43+
<div flex="5" hide-xs hide-sm>
44+
<!-- Spacer //-->
45+
</div>
46+
47+
<md-input-container class="md-block" flex-gt-sm>
48+
<label>Social Security Number</label>
49+
<input name="social" ng-model="user.social" ng-pattern="/^[0-9]{3}-[0-9]{2}-[0-9]{4}$/" />
50+
51+
<div class="hint" ng-if="showHints">###-##-####</div>
52+
53+
<div ng-messages="userForm.social.$error" ng-if="!showHints">
54+
<div ng-message="pattern">###-##-#### - Please enter a valid SSN.</div>
55+
</div>
56+
</md-input-container>
57+
58+
</div>
59+
60+
<div layout-gt-sm="row">
61+
62+
<md-input-container class="md-block" flex-gt-sm>
63+
<label>Email</label>
64+
<input name="email" ng-model="user.email"
65+
required minlength="10" maxlength="100" ng-pattern="/^.+@.+\..+$/" />
66+
67+
<div class="hint" ng-show="showHints">How can we reach you?</div>
68+
69+
<div ng-messages="userForm.email.$error" ng-hide="showHints">
70+
<div ng-message-exp="['required', 'minlength', 'maxlength', 'pattern']">
71+
Your email must be between 10 and 100 characters long and look like an e-mail address.
72+
</div>
73+
</div>
74+
</md-input-container>
75+
76+
<div flex="5" hide-xs hide-sm>
77+
<!-- Spacer //-->
78+
</div>
79+
80+
<md-input-container class="md-block" flex-gt-sm>
81+
<label>Phone Number</label>
82+
<input name="phone" ng-model="user.phone" ng-pattern="/^([0-9]{3}) [0-9]{3}-[0-9]{4}$/" />
83+
84+
<div class="hint" ng-show="showHints">(###) ###-####</div>
85+
86+
<div ng-messages="userForm.phone.$error" ng-hide="showHints">
87+
<div ng-message="pattern">(###) ###-#### - Please enter a valid phone number.</div>
88+
</div>
89+
</md-input-container>
90+
91+
<style>
92+
/*
93+
* The Material demos system does not currently allow targeting the body element, so this
94+
* must go here in the HTML.
95+
*/
96+
body[dir=rtl] .hint {
97+
right: 2px;
98+
left: auto;
99+
}
100+
</style>
101+
</div>
102+
103+
</form>
104+
</md-content>
105+
106+
</div>

‎src/components/input/demoErrorsAdvanced/script.js

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
angular.module('inputErrorsAdvancedApp', ['ngMaterial', 'ngMessages'])
2+
3+
.controller('AppCtrl', function($scope) {
4+
$scope.showHints = true;
5+
6+
$scope.user = {
7+
name: "",
8+
email: "",
9+
social: "123456789",
10+
phone: "N/A"
11+
};
12+
});

‎src/components/input/demoErrorsAdvanced/style.css

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
.hint {
2+
/* Position the hint */
3+
position: absolute;
4+
left: 2px;
5+
right: auto;
6+
bottom: 7px;
7+
8+
/* Copy styles from ng-messages */
9+
font-size: 12px;
10+
line-height: 14px;
11+
transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
12+
13+
/* Set our own color */
14+
color: grey;
15+
}
16+
17+
/* NOTE: Check the demo's HTML to see some additional RTL support CSS */
18+
19+
/* Setup animations similar to the ng-messages */
20+
.hint.ng-hide,
21+
.hint.ng-enter,
22+
.hint.ng-leave.ng-leave-active {
23+
bottom: 26px;
24+
opacity: 0;
25+
}
26+
27+
.hint.ng-leave,
28+
.hint.ng-enter.ng-enter-active {
29+
bottom: 7px;
30+
opacity: 1;
31+
}

‎src/components/input/demoIcons/index.html

+2-4
Original file line numberDiff line numberDiff line change
@@ -28,10 +28,8 @@
2828
<md-input-container class="md-icon-float md-icon-right md-block">
2929
<label>Donation Amount</label>
3030
<md-icon md-svg-src="img/icons/ic_card_giftcard_24px.svg"></md-icon>
31-
<div layout="row">
32-
<input ng-model="user.donation" type="number" step="0.01" flex>
33-
<md-icon md-svg-src="img/icons/ic_euro_24px.svg" style="position: absolute; top: 4px;"></md-icon>
34-
</div>
31+
<input ng-model="user.donation" type="number" step="0.01">
32+
<md-icon md-svg-src="img/icons/ic_euro_24px.svg"></md-icon>
3533
</md-input-container>
3634

3735
</md-content>

‎src/components/input/demoIcons/style.scss

+9
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,12 @@ md-input-container:not(.md-input-invalid) > md-icon.email { color: green; }
33
md-input-container:not(.md-input-invalid) > md-icon.name { color: dodgerblue; }
44
md-input-container.md-input-invalid > md-icon.email,
55
md-input-container.md-input-invalid > md-icon.name { color: red; }
6+
/*
7+
.right-icon {
8+
position: absolute;
9+
top: 4px;
10+
right: 2px;
11+
left: auto;
12+
margin-top: 0;
13+
}
14+
*/

0 commit comments

Comments
 (0)