Upgrade angular-messages affect my layout - css

Question

Here is the screenshot of my login form:
But after I upgrade angular-message to version 1.4 and above, the layout changes to:
My source code:
<ion-view view-title="Login">
<ion-header-bar class="bar-calm">
<h1 class="title">Login</h1>
</ion-header-bar>
<ion-content class="padding">
<form name="signinForm" novalidate="">
<div style="line-height: 250px; background-color: rgb(255, 255, 255); border: 1px solid rgb(238, 238, 238); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; text-align: center; width: 100%; height: auto;">
<i class="icon ion-image" style="font-size: 64px; color: rgb(136, 136, 136); vertical-align: middle;"></i>
</div>
<div class="list">
<label class="item item-input"
ng-class="{'has-error' : signinForm.email.$invalid && signinForm.email.$dirty,
'valid-lr' : signinForm.email.$valid && signinForm.email.$dirty}">
<span class="input-label">Email</span>
<input type="email"
name="email"
placeholder="Email"
ng-model="data.email"
required>
</label>
<div class="form-errors"
ng-show="signinForm.email.$error && signinForm.email.$dirty"
ng-messages="signinForm.email.$error"
ng-messages-include="templates/form-errors.html">
</div>
<label class="item item-input"
ng-class="{'has-error-lr' : signinForm.password.$invalid && signinForm.$submitted, 'valid-lr' : signinForm.password.$valid && signinForm.$submitted}">
<span class="input-label">Password</span>
<input type="password"
name="password"
placeholder="Password"
ng-model="data.password"
ng-minlength="5">
</label>
<div class="form-errors"
ng-show="signinForm.password.$error && signinForm.password.$dirty"
ng-messages="signinForm.password.$error"
ng-messages-include="templates/form-errors.html">
</div>
</div>
<div class="spacer" style="height: 0px;"></div>
<button class="button button-calm button-block icon-left ion-android-social-user" ng-click="login()" ng-disabled="signinForm.$invalid">Login</button>
Not a memeber? Create an account
</form>
</ion-content>
</ion-view>
What could be the cause? Can anybody advise? Thanks.

Answer 1

If the ng-message directive is nested within the ng-messages directive, this should work. Otherwise, it is not guaranteed to work on the same element. The version makes no difference after Angular 1.2.18+. For example:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-messages.js"></script>
<script>
angular.module('foo', ['ngMessages']);
</script>
<script>
function bop(model, view)
{
var i = 0, len = 100000, buz = "";
for (i; i < len; i++)
{
buz = buz.concat(i);
}
bop.cache.put('listContent', buz);
view.loaded = true;
return model;
}
function baz($templateCache)
{
bop.cache = $templateCache;
return bop;
}
baz.$inject = ['$templateCache','$rootScope'];
angular.module('foo').filter('baz', baz);
</script>
<div ng-app="foo">
<form name="myForm">
<label>Check Me<input type="checkbox" ng-model="$root['required']"></label>
<div ng-include="'listContent' | baz:myForm"></div>
<div ng-messages="$root" style="color:green" role="alert">
<div ng-message="required">👯</div>
</div>
<div ng-messages="myForm">
<div ng-message="loaded" style="color:blue">Loaded</div>
</div>
</div>
compared to:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-messages.js"></script>
<script>
angular.module('foo', ['ngMessages']);
</script>
<script>
function bop(model, view)
{
var i = 0, len = 100000, buz = "";
for (i; i < len; i++)
{
buz = buz.concat(i);
}
bop.cache.put('listContent', buz);
view.loaded = true;
return model;
}
function baz($templateCache)
{
bop.cache = $templateCache;
return bop;
}
baz.$inject = ['$templateCache','$rootScope'];
angular.module('foo').filter('baz', baz);
</script>
<div ng-app="foo">
<form name="myForm">
<label>Check Me<input type="checkbox" ng-model="$root['required']"></label>
<div ng-include="'listContent' | baz:myForm"></div>
<div ng-messages="$root" style="color:green" role="alert">
<div ng-message="required">👯</div>
</div>
<div ng-messages="myForm">
<div ng-message="loaded" style="color:blue">Loaded</div>
</div>
</div>
References
ionic Issue #6040: Please provide option to validate form elements like <ion-input>, <ion-select>, <ion-textarea>
AngularJS Repo: ngmessage Issues