Error messages not showing in Angular JS
Question
I am trying to show some login validation errors using the code below but it's not working.
When i click on Login button it's going to the next page and error messages are not displayed as supposed.
Any ideas?
index.html:-
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script type="lib/angular.min.js"></script>
<script type="angularFile.js"></script>
</head>
<body ng-app="demoApp" ng-controller="Ctrl">
<h1>Login Form</h1>
<form action="next.html" ng-submit="fun1($event)">
userName:<input name="name" ng-model="un">
<div style="color: red">{{msg1}}</div><br>
passWord:<input type="password" name="pwd" ng-model="pw">
<div style="color: red">{{msg2}}</div><br>
<input type="submit" value="Login"/>
</body>
</html>
angularFile.js:
var app = angular.modul("demoApp",[]);
app.controller("Ctrl",function($scope){
$scope.un="";
$scope.pw="";
$scope.msg1="";
$scope.msg2="";
$scope.fun1=function(e){
if($scope.un.leggth==0){
$scope.msg1="please enter user name"
e.preventDefault();
}else{
$scope.msg1="";
}
if($scope.pw.leggth==0){
$scope.msg2="please enter password"
e.preventDefault();
}else{
$scope.msg2="";
}
}
});
3 answers
solution1
1 ACCPTED 2018-01-02 12:27:14
var app = angular.module("demoApp",[]);
app.controller("Ctrl",function($scope){
$scope.un="";
$scope.pw="";
$scope.msg1="";
$scope.msg2="";
$scope.fun1=function(e){
if($scope.un.length == 0){
$scope.msg1="please enter user name"
e.preventDefault();
}else{
$scope.msg1="";
}
if($scope.pw.length== 0){
$scope.msg2="please enter password"
e.preventDefault();
}else{
$scope.msg2="";
}
}
});
Use this code and let me know.
make sure you have imported the library correctly or import it from web
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
solution2
0 2018-01-02 12:34:16
You have not close your form tag in html. and all other things that other developers are suggesting.
<div ng-app="demoApp" ng-controller="Ctrl">
<h1>Login Form</h1>
<form ng-submit="fun1($event)">
userName:<input name="name" ng-model="un">
<div style="color: red">{{msg1}}</div><br>
passWord:<input type="password" name="pwd" ng-model="pw">
<div style="color: red">{{msg2}}</div><br>
<input type="submit" value="Login"/>
</form>
</div>
Inside Controller--
var app = angular.module("demoApp",[]);
app.controller("Ctrl",function($scope){
$scope.un="";
$scope.pw="";
$scope.msg1="";
$scope.msg2="";
$scope.fun1=function(e){
if($scope.un.length==0){
$scope.msg1="please enter user name"
e.preventDefault();
}else{
$scope.msg1="";
}
if($scope.pw.length==0){
$scope.msg2="please enter password"
e.preventDefault();
}else{
$scope.msg2="";
}
}
});
Working jsfiddle link-- JSFIDDLE
solution3
0 2018-01-02 12:36:55
It's angular.module();
You have put it as angular.modul()
var app = angular.module("demoApp", []);
Also fix the spellings in $scope.pw.leggth and $scope.un.leggth to length
You need to fix these and it will work.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.