Question

以下是表单的Html代码。这里唯一的问题是，在页面加载完成之前会显示错误消息。有什么建议吗？

修改

我正在分享此问题的视频链接

 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>

Answer 1

@Yann Lelong，代码将以@Arvind Jha想要的方式运行，只要javascript在 html之前加载，例如在您的示例中。但根据Arvind的说法，似乎javascript代码之后被加载而不是立即加载（可能是因为服务器速度慢或网速）。

我接受了Yann的Plnkr并对其进行了修改以模拟如果javascript代码没有立即加载会发生什么，我正在复制问题。修复它的方法是将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

Answer 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文件。

Angular Js：显示错误消息，直到页面加载完成

2 个答案: