Question

这是错误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>

形状误差-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');
});

最佳做法是什么？提前谢谢！

*****更新*****

我使用了ng-if =“signinForm。$ submitted”

而不是ng-show。

Answer 1

当您的应用程序正在加载时，浏览器会以原始（未编译）形式简要显示您的HTML模板。

您可以尝试使用ngCloack来避免闪烁效应。

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

Answer 2

以下是我修复它的方法，我用过

NG-如果= “signinForm。$提交”

而不是ng-show。

为什么（表单。$ error＆amp;＆amp; form。$ submitted）启动时为真？

2 个答案: