
11

Why is ($ form $ Error & $ .submitted form) true on start?
source link: https://www.codesd.com/item/why-is-form-error-submitted-form-true-on-start.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Why is ($ form $ Error & $ .submitted form) true on start?
advertisements
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>
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK