11

Why is ($ form $ Error & $ .submitted form) true on start?

 4 years ago
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.
neoserver,ios ssh client

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>


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK