Angularjs：在页面加载完成之前显示错误消息答案

【问题标题】：Angular Js : error message get displayed utill page load completesAngularjs：在页面加载完成之前显示错误消息
【发布时间】：2015-10-17 14:45:13
【问题描述】：

以下是表单的 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 属性？
实际上，这可能更多是因为元素在 DOM 中是可见的，直到 Angular 出现并完成它的工作。一个简单（有点老套）的“修复”方法是手动将display: none; 添加到样式中，就像添加颜色一样。但正确的方法可能是使用ng-cloak，只是不要忘记在你的html顶部添加样式：code.angularjs.org/1.3.10/docs/api/ng/directive/ngCloak

标签： javascript jquery angularjs html

【解决方案1】：

@Yann Lelong，只要在您的示例中在 html 之前加载 javascript，代码就会按照 @Arvind Jha 想要的方式工作。但根据 Arvind 所说，似乎 javascript 代码是在之后而不是立即加载的（可能是因为服务器速度慢或网络速度）。

我采用了 Yann 的 Plnkr 并对其进行了修改，以模拟如果没有立即加载 javascript 代码并且我正在复制该问题会发生什么。修复它的方法是将ng-cloak 属性添加到您想要在 Angular 完全加载之前隐藏的元素。

鉴于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

【讨论】：

【解决方案2】：

看来您的代码实际上正在按照您想要的方式运行。我只是将它复制/粘贴到 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 文件。

【讨论】：