This is the video of the bug http://youtu.be/siOfUluPraA and below is my code.
It seems that ng-show=true for a split second
signinForm.$submitted = true for a split second
Login.html
<ion-view>
<ion-content ng-controller="SignInCtrl">
<div class="login-logo">
<div><h4>LOGIN TO YOUR ACCOUNT</h4></div>
</div>
<form name="signinForm" novalidate>
<div class="list login">
<!-- input username -->
<label class="item item-input item-top"
ng-class="{'form-has-error' : signinForm.username.$invalid && signinForm.username.$submitted}">
<img src="./img/profile6.png" class= "image-thumb" alt="">
<input type="text"
name="username"
ng-model="user.username"
ng-minlength="5"
required placeholder="Name or National Id">
</label>
<!-- validation username -->
<div class="form-errors"
ng-show="signinForm.username.$error && signinForm.$submitted"
ng-messages="signinForm.username.$error"
ng-messages-include="templates/formerrors/form-errors-username.html">
</div>
</div>
</form>
</ion-content>
</ion-view>
form-errors-username.html
<div class="form-error" ng-message="required">This field is required.</div>
<div class="form-error" ng-message="minlength">This field is must be at least 5 characters.</div>
config.js
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('signin', {
url: '/sign-in',
templateUrl: 'templates/login.html',
controller: 'SignInCtrl'
});
$urlRouterProvider.otherwise('/sign-in');
});
What is the best practice? Thanks in advance!
***** UPDATE *****
I used ng-if="signinForm.$submitted"
instead of ng-show.
Your HTML template is briefly displayed by the browser in its raw (uncompiled) form, while your application is loading.
You can try to use ngCloack to avoid the flicker effect.
<div ng-show="form.$submitted" ng-cloak>
Here's how I fixed it, I used
ng-if="signinForm.$submitted"
instead of ng-show.