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.但是就是上面的代码找不到错误.任何人都可以检查代码吗?谢谢.
I'm trying to use ng-messages to do a simple validation for the login form, particular div will be displayed if username is blank. But just can't find the error with the code above. Can anyone check the code? Thanks.
推荐答案
您有两种选择来解决此问题.一种选择是在表格内放置ng-messages指令.这是因为您在form_login中定义了loginCtrl的范围.但是，如果您不想移动该指令，则必须将 ng-controller 从< form ...> 移至< div类="form_container" ng-controller ="loginCtrl"> .以下代码段显示了第二个选项
you have two choices to resolve this problem. One option is place ng-messages directive inside the form. This is because you defined scope for loginCtrl in form_login. But if you don't want to move that directive, you have to move ng-controller from <form...> to <div class="form_container" ng-controller="loginCtrl">. The following snippet shows that second option
<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>
请注意，您正在验证用户名输入，它具有一个值.
Please note that you are validating username input and it has a value.
这篇关于ng-messages无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
