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

You have misspelt length.

Andy G
– Andy G

2018-01-02 12:16:34 +00:00
Commented Jan 2, 2018 at 12:16 — Andy G
– Andy G, Commented Jan 2, 2018 at 12:16
length instead leggth

Maher
– Maher

2018-01-02 12:17:21 +00:00
Commented Jan 2, 2018 at 12:17 — Maher
– Maher, Commented Jan 2, 2018 at 12:17
Is Tag 'java' correct or did you mean Javascript'?

Reporter
– Reporter

2018-01-02 12:17:22 +00:00
Commented Jan 2, 2018 at 12:17 — Reporter
– Reporter, Commented Jan 2, 2018 at 12:17
and misspelled module.

Daniel A. White
– Daniel A. White

2018-01-02 12:19:36 +00:00
Commented Jan 2, 2018 at 12:19 — Daniel A. White
– Daniel A. White, Commented Jan 2, 2018 at 12:19
check your dev tools for any errors.

Daniel A. White
– Daniel A. White

2018-01-02 12:19:54 +00:00
Commented Jan 2, 2018 at 12:19 — Daniel A. White
– Daniel A. White, Commented Jan 2, 2018 at 12:19

Aman · Accepted Answer · 2018-01-03 05:37:04Z

1

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>

edited Jan 3, 2018 at 5:37

answered Jan 2, 2018 at 12:27

Aman

8383 gold badges14 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Krish Over a year ago

by default its showing error messages like--->{{msg1}},{{msg2}} with out tapped on login button when tapped on button then move to next page

Aman Over a year ago

see the plunker

Aman Over a year ago

see on console what error is there? have you imported library correctly?

Aman Over a year ago

@Krish i believe you have not imported the js file correctly use this <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

Krish Over a year ago

yes but what is problem in my code i just copied and paste your code also

|

Vikas Gupta · Accepted Answer · 2018-01-02 12:34:16Z

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

Nimeshka Srimal · Accepted Answer · 2018-01-02 12:36:55Z

0

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.

answered Jan 2, 2018 at 12:36

Nimeshka Srimal

9,1705 gold badges48 silver badges62 bronze badges

Collectives™ on Stack Overflow

Error messages not showing in Angular JS

index.html:-

angularFile.js:

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

index.html:-

angularFile.js:

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related