ng-messages无法正常工作
[英]ng-messages is not working
问题描述
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="login.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-messages.min.js"></script>
</head>
<body ng-app="loginApp">
<div class="container">
<div class="login_logo"></div>
</div>
<div class="form_container">
<div ng-messages="form_login.username.$error">
<div class="alertmsg" ng-message="required">Your username is required</div>
</div>
<div class="form_left">
<form class="form_login" name="form_login" ng-controller="loginCtrl" ng-submit="submitForm()" novalidate>
<div class="usr">
<input id="username" name="username" ng-model="username" type="text" autofocus="autofocus" required />
</div>
<div class="psw">
<input id="password" name="password" ng-model="password" type="password" required />
</div>
</form>
</div>
<div class="form_right">
<a class="submit" href="" ng-click="submitForm()"></a>
</div>
<div class="clear"></div>
</div>
<script type="text/javascript">
var app = angular.module("loginApp", ["ngMessages"]);
app.controller("loginCtrl", function($scope) {
$scope.username = "11";
$scope.password = "";
$scope.submitForm = function() {};
});
</script>
</body>
</html>
我正在尝试使用ng-messages对登录表单进行简单验证，如果用户名为空，则将显示特定的div。 但是就是上面的代码找不到错误。 任何人都可以检查代码吗？ 谢谢。
2 个解决方案
解决方案1
3 2016-01-06 01:56:20
您的ng-messages指令需要嵌套在form标签中
<div class="form_left">
<form class="form_login" name="form_login"
ng-controller="loginCtrl" ng-submit="submitForm()" novalidate>
<div class="usr">
<input id="username"
name="username"
ng-model="username"
type="text" autofocus="autofocus" required />
</div>
<div class="psw">
<input id="password"
name="password"
ng-model="password"
type="password" required />
</div>
<div ng-messages="form_login.username.$error">
<div class="alertmsg" ng-message="required">
Your username is required
</div>
</div>
</form>
</div>
一种简单的检查和验证表单的方法是转储表单对象，这样您就可以准确看到使用不同角度验证属性所发生的情况。
<div class="form_left">
<form class="form_login" name="form_login"
ng-controller="loginCtrl" ng-submit="submitForm()" novalidate>
......
{{form_login}}
</form>
</div>
解决方案2
1 已采纳 2016-01-06 02:21:33
您有两种选择来解决此问题。 一种选择是将ng-messages指令放置在表单中。 这是因为您在form_login中定义了loginCtrl的范围。 但是，如果您不想移动该指令，则必须将ng-controller从<form...>移到<div class="form_container" ng-controller="loginCtrl"> 。 以下代码段显示了第二个选项
<div class="form_container" ng-controller="loginCtrl">
<div ng-messages="form_login.username.$error">
<div class="alertmsg" ng-message="required">Your username is required</div>
</div>
<div class="form_left">
<form class="form_login" name="form_login" ng-submit="submitForm()" novalidate>
<div class="usr">
<input id="username" name="username" ng-model="username" type="text" autofocus="autofocus" required />
</div>
<div class="psw">
<input id="password" name="password" ng-model="password" type="password" required />
</div>
</form>
</div>
<div class="form_right">
<a class="submit" href="" ng-click="submitForm()"> click</a>
</div>
<div class="clear"></div>
</div>
请注意，您正在验证用户名输入，它具有一个值。
ng-messages无法与ng-repeat一起使用
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.