Enhancing the functionality of angular-messages is impacting the overall design of

Question

Enhancing the functionality of angular-messages is impacting the overall design of

Displaying here is the current state of my login form:

However, subsequent to upgrading angular-message to version 1.4 and higher, the layout transforms into this:

Sharing my source code for reference:

<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>
            <a href="#/signup" class="button button-positive button-clear button-block ">Not a memeber? Create an account</a>
       </form>
    </ion-content>
</ion-view>

What might be triggering this change in layout? Seeking advice or suggestions. Thanks.

css angularjs ionic-framework upgrade ng-messages

Answer 1

Answer №1

In order for the ng-message directive to function properly, it should be nested within the ng-messages directive. Otherwise, it may not work as expected on the same element. The Angular version used does not impact the functionality after 1.2.18+. An example is provided below:

<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

Answer 2

In order for the ng-message directive to function properly, it should be nested within the ng-messages directive. Otherwise, it may not work as expected on the same element. The Angular version used does not impact the functionality after 1.2.18+. An example is provided below:

<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

Enhancing the functionality of angular-messages is impacting the overall design of

Answer №1

Similar questions

Connect data from an HTML table depending on the chosen option in a dropdown menu using AngularJS, JQuery, JSON, and

Retrieving information from a database by employing AngularJS with the assistance of PHP

The hovering over a table data element results in a superior transformation

The progress indicator fails to activate during the first step

How can I position a div element inside another fixed div element?

Ensure that the table is padded while keeping the cells collapsed

Definition file for Typescript Angular 1.5 component

Unable to select options from the drop-down menu

The banner may be cropped when viewing on lower resolutions such as mobile devices or when zoomed in

What is the best way to adjust the size of a toggle button

The positioning problem arising from using a Vuetify select dropdown within a datatable

Customizing the tab content background color in MaterializeCSS

Ways to retrieve response data from the server using angularjs

directive in Angular pointing to a specific controller

The Beginner's Guide to Mastering Ajax and Grails

What is the process for updating the background image in Ionic?

Extract the color of an individual character

Is there a way to transfer the value from one directive to another directive template and access it in a different directive's scope?

Unexpected error with UI Router parameters

When using Ionic's ui-router, an error may be thrown when checking the onEnter function for the second