为什么 (form.$error && form.$submitted) 在开始时为真？

Question

这是这个bug http://youtu.be/siOfUluPraA的视频下面是我的代码。

似乎Ng-show =true

signinForm。$submitted = true

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');
});

最佳实践是什么?提前感谢!

***** UPDATE *****

我使用ng-if="signinForm.$submitted"

代替ng-show.

Answer 1

当应用程序加载时，浏览器会以原始(未编译)的形式短暂显示HTML模板。

你可以尝试使用ngCloack来避免闪烁效果。

<div ng-show="form.$submitted" ng-cloak>

Answer 2

我是这样修改的，我使用了

ng-if = " signinForm。$提交"

代替ng-show。