logo标签列表

Angular Js：错误信息在页面加载完成之前显示

javascriptjqueryangularjshtml
3
以下是表单的Html代码。唯一的问题在于，错误消息直到页面加载完成才会显示出来。 有什么建议吗？
编辑
我分享了这个问题的视频链接。

https://vimeo.com/142634090

 var app = angular.module('myApp', []);
    app.controller('validateCtrl', function($scope) {
       
    });
<form ng-app="myApp" action="#" method="post" ng-controller="validateCtrl" name="myForm" novalidate>
 <div class="form-group-custom">
  <label>Full Name</label>
  <input type="text" name="fullName" class="form-control" placeholder="Full Name" ng-model="fullName"  required>
  <span style="color:red" ng-show="(myForm.fullName.$dirty && myForm.fullName.$invalid)">
   <span ng-show="myForm.fullName.$error.required">Email is required.</span>
  </span>
 </div>
 
 <div class="form-group-custom">
   <label for="exampleInputEmail1">Email address</label>
  <input type="email" name="useremail" class="form-control" placeholder="Email" ng-model="useremail" required>
  <span style="color:red" ng-show="myForm.useremail.$dirty && myForm.useremail.$invalid">
  <span ng-show="myForm.useremail.$error.required">Email is required.</span>
  <span ng-show="myForm.useremail.$error.email">Invalid email address.</span>
  </span>
 </div>
        
  <div class="box-footer-custom">
 <button class="btn btn-primary" type="submit">Save</button>
 <button class="btn btn-danger" type="submit" style="margin-left:10px;">Cancel</button>
  </div>
</form>

你尝试过使用$touched属性吗？ - JoseM
实际上，这可能更多是因为在 Angular 开始工作之前，该元素在 DOM 中是可见的。一种简单（有点 hacky）的“修复”方法是手动添加 display: none; 到样式中，就像你添加了颜色一样。但正确的方法可能是使用 ng-cloak，只要不要忘记在 HTML 的顶部添加样式：https://code.angularjs.org/1.3.10/docs/api/ng/directive/ngCloak - JoseM
2个回答
3

@Yann Lelong，只要javascript在html之前加载，像你的例子一样，代码就能按照@Arvind Jha的期望工作。但根据Arvind所说，似乎javascript代码是稍后加载的，并非立即加载（可能是因为服务器慢或网络速度慢）。

我使用了Yann的Plnkr并进行了修改以模拟如果javascript代码没有立即加载会发生什么，并且我成功重现了这个问题。解决方法是在那些你想在Angular完全加载之前隐藏的元素中添加ng-cloak属性。

考虑到ng-cloak的CSS规则包含在angular.js中，因此建议在html头部手动添加ngCloak的样式规则。

<head>
  <style>
    [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
      display: none !important;
    }
  </style>
</head>

你想要使用 ng-cloak 隐藏的组件:

  <div class="form-group-custom">
    <label>Full Name</label>
    <input type="text" name="fullName" class="form-control" placeholder="Full Name" ng-model="fullName" required>
    <span style="color:red" ng-cloak ng-show="(myForm.fullName.$dirty && myForm.fullName.$invalid)">
            <span ng-show="myForm.fullName.$error.required">Name is required.</span>
    </span>
  </div>

  <div class="form-group-custom">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" name="useremail" class="form-control" placeholder="Email" ng-model="useremail" required>
    <span style="color:red"  ng-cloak  ng-show="myForm.useremail.$dirty && myForm.useremail.$invalid">
        <span ng-show="myForm.useremail.$error.required">Email is required.</span>
    <span ng-show="myForm.useremail.$error.email">Invalid email address.</span>
    </span>
  </div>

这是我所做更改的plnkr链接：http://plnkr.co/edit/iKFohNLbRD8zghdzBvuC?p=preview。
0

看起来你的代码实际上是按照你想要的方式工作的。我只是将它复制/粘贴到this Plunker中，然后它就可以工作了。
index.hmtl

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.angularjs.org/1.4.0-rc.1/angular.js"></script>
  <script src="app.js"></script>
</head>

<body>
  <form ng-app="validationApp" action="#" method="post" ng-controller="validateCtrl" name="myForm" novalidate>
<div class="form-group-custom">
  <label>Full Name</label>
  <input type="text" name="fullName" class="form-control" placeholder="Full Name" ng-model="fullName" required>
  <span style="color:red" ng-show="(myForm.fullName.$dirty && myForm.fullName.$invalid)">
        <span ng-show="myForm.fullName.$error.required">Name is required.</span>
  </span>
</div>
<div class="form-group-custom">
  <label for="exampleInputEmail1">Email address</label>
  <input type="email" name="useremail" class="form-control" placeholder="Email" ng-model="useremail" required>
  <span style="color:red" ng-show="myForm.useremail.$dirty && myForm.useremail.$invalid">
    <span ng-show="myForm.useremail.$error.required">Email is required.</span>
  <span ng-show="myForm.useremail.$error.email">Invalid email address.</span>
  </span>
</div>
<div class="box-footer-custom">
  <button class="btn btn-primary" type="submit">Save</button>
  <button class="btn btn-danger" type="submit" style="margin-left:10px;">Cancel</button>
</div>
  </form>
</body>

</html>

app.js

// create angular app
var app = angular.module('validationApp', []);

// create angular controller
app.controller('validateCtrl', function($scope) {

});

你可以检查你的HTML头部，确保你正确地包含了必需的脚本：AngularJS和你的JS文件。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接