angularjs form not working when ng-app and ng-controller is declared in form tag

Question

When I declare the ng-app and ng-controller the form does not do validation.

If I remove them then the form does basic validation, but I want to use controller logic to perform username and password validation and routing, which I cant use (as ng-controller is removed).

What I am missing?

<html ng-app>
  <head>
    <title>My Angular App</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script type="text/javascript"> 
    document.write("\<script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'>\<\/script>");
</script>
  <script>


<script>
var app = angular.module('myapp', []);
app.controller('loginCtrl', function($scope, $location){
$scope.loginCheck = function(){
var uname = $scope.user.name;
var pwd = $scope.user.password;
if ( uname == 'admin' && pwd =='admin123'){
window.location.hash='#/dashboard';
$location.path('/dashboard');
            }
            else $location.path('/about')
      };

});
</script>

<body>
    <h3  align="center">Loginn</h3>

        <form   name="form" class="login" ng-app='myapp' ng-controller = 'loginCtrl' >

<input placeholder="User Name"
       name="name" ng-model="user.name"  class="login-input" ng-model-options="{updateOn:'blur'}"
       required pattern=".{3,}" />
<div class="error-message" ng-show="form.name.$invalid && !form.name.$pristine">
    We need a name with 3 chars or more.
</div>

<br>

<input placeholder="E-mail"
       name="email" ng-model="user.email" class="login-input"  ng-model-options="{updateOn:'blur'}"
       required type="email"  />
<div class="error-message"
     ng-show="form.email.$invalid && !form.email.$pristine">
    We need a valid e-mail address.
</div>

<br>

<input type="password" class="login-input"  ng-model="user.password" name="uPassword" required placeholder='Password' ng-minlength="6" ng-maxlength="15" title="6 to 15 characters" />
<span class="error" ng-show="form.uPassword.$dirty && form.uPassword.$error.minlength">Too short</span>
<span ng-show="form.uPassword.$dirty && form.uPassword.$error.required">Password required.</span><br />

<input type="password" class="login-input"  ng-model="user.confirmpassword" name="ucPassword" required placeholder='Confirm Password' ng-minlength="6" ng-maxlength="15" title="6 to 15 characters" />
<span class="error" ng-show="form.ucPassword.$dirty && form.ucPassword.$error.minlength">Too short</span>
<span ng-show="form.ucPassword.$dirty && form.ucPassword.$error.required">Retype password.</span>
<div ng-show="(form.uPassword.$dirty && form.ucPassword.$dirty) && (user.password != user.confirmpassword)">
    <span>Password mismatched</span>
</div>

<br>

 <input type="submit"   value ="Submit "  ng-click="loginCheck()" ng-disabled="form.$invalid"/>

</form>



</body>

How can I add/specify ng-controller and ng-app in this form?

look at the errors thrown in console. You can only have one `ng-app` in a page. — charlietfl, Oct 29 '15 at 12:44
There is a lot going on here, an open script tag with no closing tag, `ng-app` declared twice (one without a module name definition), you should start with a hello world angularjs app, get it working and then build up to more complex code. — jnthnjns, Oct 29 '15 at 12:45

IggY · Accepted Answer · 2015-10-29T12:53:39.993

You have many problems in you app :

first line : <html ng-app>

remove ng-app, as said in the comment you can only have one ng-app tag

2 <script> in a row :

Here :

<script>
<script>
var app = angular.module('myapp', []);

JQuery should be inserted before angular, and should be inserted this way :

Here :

<script src='//code.jquery.com/jquery-latest.min.js'></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>

Please find bellow a working example :

<html>

<head>
  <title>My Angular App</title>
  <script src='//code.jquery.com/jquery-latest.min.js'></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>

  <script>
    var app = angular.module('myapp', []);
    app.controller('loginCtrl', function($scope, $location) {
      $scope.loginCheck = function() {
        var uname = $scope.user.name;
        var pwd = $scope.user.password;
        if (uname == 'admin' && pwd == 'admin123') {
          window.location.hash = '#/dashboard';
          $location.path('/dashboard');
        } else {
          $location.path('/about');
        }
      };
    });
  </script>
</head>

<body ng-app="myapp" ng-controller="loginCtrl">
  <form name="form" class="login">

    <input placeholder="User Name" name="name" ng-model="user.name" class="login-input" ng-model-options="{updateOn:'blur'}" required pattern=".{3,}" />
    <div class="error-message" ng-show="form.name.$invalid && !form.name.$pristine">
      We need a name with 3 chars or more.
    </div>


    <input placeholder="E-mail" name="email" ng-model="user.email" class="login-input" ng-model-options="{updateOn:'blur'}" required type="email" />
    <div class="error-message" ng-show="form.email.$invalid && !form.email.$pristine">
      We need a valid e-mail address.
    </div>


    <input type="password" class="login-input" ng-model="user.password" name="uPassword" required placeholder='Password' ng-minlength="6" ng-maxlength="15" title="6 to 15 characters" />
    <span class="error" ng-show="form.uPassword.$dirty && form.uPassword.$error.minlength">Too short</span>
    <span ng-show="form.uPassword.$dirty && form.uPassword.$error.required">Password required.</span>
    <br />

    <input type="password" class="login-input" ng-model="user.confirmpassword" name="ucPassword" required placeholder='Confirm Password' ng-minlength="6" ng-maxlength="15" title="6 to 15 characters" />
    <span class="error" ng-show="form.ucPassword.$dirty && form.ucPassword.$error.minlength">Too short</span>
    <span ng-show="form.ucPassword.$dirty && form.ucPassword.$error.required">Retype password.</span>
    <div ng-show="(form.uPassword.$dirty && form.ucPassword.$dirty) && (user.password != user.confirmpassword)">
      <span>Password mismatched</span>
    </div>
  </form>
</body>

angularjs form not working when ng-app and ng-controller is declared in form tag

1 Answers1