CODEWITHSUNDEEP
javascripthtmlangularjs
Krish
Krish

Reputation: 4242

Error messages not showing in Angular JS

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="";
        }
    }
});

Upvotes: 0

Views: 891

Answers (3)

Aman
Aman

Reputation: 838

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 plunker

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/a‌​ngular.min.js"></scr‌​ipt>

Upvotes: 1

Nimeshka Srimal
Nimeshka Srimal

Reputation: 8920

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.

Upvotes: 0

Vikas Gupta
Vikas Gupta

Reputation: 1233

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

Upvotes: 0

Related Questions