Angular js Cannot read property '$setPristine' of undefined

Question

<!--TypeError:``Cannot read property '$setPristine' of undefined
at n.$scope.add(lay.js: 22)
at fn(eval at compile(angular.js: 14432), < anonymous > : 4: 200)
at b(angular.js: 15485)
at e(angular.js: 25018)
at n.$eval(angular.js: 17229)
at n.$apply(angular.js: 17329)
at HTMLButtonElement. < anonymous > (angular.js: 25023)
at Qf(angular.js: 3456)
at HTMLButtonElement.d(angular.js: 3444)(anonymous
    function)@ angular.js: 13550(anonymous
    function)@ angular.js: 10225$apply@ angular.js: 17334(anonymous
    function)@ angular.js: 25023Qf@ angular.js: 3456d@ angular.js: 3444-- >

  angular.module('myApp', ['ngMaterial']).controller('myCtrl', function($scope) {
    $scope.userlist = [];
    $scope.userlist = function(user) {
      console.log(user)
      if (user && user.firstname) {
        $scope.userlist.push({
          firstname: user.firstname,
          lastname: user.lastname,
          DOB: user.dateofbirth,
          email: user.mail,
          password: user.paswd,
          repass: user.paswdtwo
        });

        $scope.add();

      }
    };
    $scope.add = function() {
      $scope.user = {};
      $scope.userForm.$setPristine();
      $scope.userForm.$setUntouched();
    };

  });

<!DOCTYPE html>
<html>

<head>
  <title>Signup</title>
  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>

  <!-- Angular Material Library -->
  <script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
  <!-- <script type="text/javascript" src= "layout.js"></script> -->
  <script type="text/javascript" src="lay.js"></script>
</head>

<body>
  <form name="userForm" novalidate role="form" ng-submit="userForm.$valid && userlist(user)">
    <div ng-app="myApp" ng-controller="myCtrl">
      <div layout="column" layout-align="center center">
        <md-card>
          <div layout-gt-sm="row">
            <md-input-container class="md-block">
              <label>First Name</label>
              <input name="firstname" ng-model="user.firstname" required>
              <div ng-show="userForm.$submitted || form.firstname.$touched">

                <div ng-show="userForm.firstname.$error.required">your first Name.</div>

              </div>

            </md-input-container>
            <md-input-container class="md-block">
              <label>Last Name</label>
              <input name="lastname" ng-model="user.lastname" required>
              <div ng-show="userForm.$submitted || form.lastname.$touched">
                <div ng-show="userForm.lastname.$error.required">Enter last name</div>
              </div>
            </md-input-container>
          </div>
          <md-input-container>
            <label>DOB</label>
            <md-datepicker ng-model="user.dateofbirth" name="dateofbirth" required></md-datepicker>
            <div ng-show="userForm.$submitted || form.dateofbirth.$touched ">
              <div ng-show="userForm.dateofbirth.$error.required">Enter DOB</div>
            </div>
          </md-input-container>
          <md-input-container class="md-block">
            <label>Email</label>
            <input name="mail" type="email" ng-model="user.mail" required>
            <div ng-show="userForm.$submitted || form.mail.$touched">
              <div ng-show="userForm.mail.$error.required">Enter email ID</div>
            </div>
          </md-input-container>
          <md-input-container class="md-block">
            <label>Password</label>
            <input name="paswd" type="Password" ng-model="user.paswd" required>
            <div ng-show="userForm.$submitted || form.paswd.$touched">
              <div ng-show="userForm.paswd.$error.required">Enter your password</div>
            </div>
          </md-input-container>
          <md-input-container class="md-block">
            <label>Re-type Password</label>
            <input name="paswdtwo" type="Password" ng-model="user.paswdtwo" required>
            <div ng-show="userForm.$submitted || form.paswdtwo.$touched">
              <div ng-show="userForm.paswdtwo.$error.required"></div>
            </div>
          </md-input-container>
          <md-card-action layout="row" layout-align="center">
            <md-button class="md-raised md-primary" ng-click="add()">Signup</md-button>

          </md-card-action>
          <md-card-content>
            <span ng-repeat="x in lag">
    			<span ng-bind="x.firstname" ></span>
            </span>
          </md-card-content>
        </md-card>
      </div>
    </div>
  </form>
  </script>
</body>

</html>

Welcome to S.O.! What is this, what do you want? Please refer to the How to ask a question section of this website. — David Andrei Ned
– David Andrei Ned, Commented Nov 3, 2016 at 9:13

Mr Lister · Accepted Answer · 2016-11-19 18:13:10Z

1

The <form> tag is outside the ng-app/ng-controller attribute lines. Angular won't be able to access $scope.userForm in your $scope.add function.

edited Nov 19, 2016 at 18:13

Mr Lister

46.8k15 gold badges118 silver badges156 bronze badges

answered Nov 3, 2016 at 8:38

rrd

5,9873 gold badges32 silver badges37 bronze badges

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

Comments

ankur kumar · Accepted Answer · 2016-11-03 08:38:17Z

0

$scope.add= 
function(userForm   put form object)
{
        $scope.user={};
};

answered Nov 3, 2016 at 8:38

ankur kumar

4273 silver badges9 bronze badges

Comments

Fabio Silva Lima · Accepted Answer · 2016-11-03 08:38:22Z

0

HTML changes:

<md-button class="md-raised md-primary" ng-click="add(userForm)">Signup</md-button>

Angular changes:

$scope.add=function(userForm){
        $scope.user={};
        userForm.$setPristine();
        userForm.$setUntouched();
    };

userForm is not in $scope, you need to pass to add function.

:)

answered Nov 3, 2016 at 8:38

Fabio Silva Lima

7246 silver badges14 bronze badges

Comments

Abdulsalam Khan · Accepted Answer · 2016-11-03 08:45:34Z

Your form tag is outside the controller in HTML

is outside the controller scope so use this

<div ng-app="myApp" ng-controller="myCtrl">
<form name="userForm" novalidate role="form" ng-submit="userForm.$valid && userlist(user)">
    <div  layout="column" layout-align="center center">
        <md-card>
            <div layout-gt-sm="row">
                <md-input-container class="md-block" >
                    <label>First Name</label><input name="firstname" ng-model="user.firstname" required>
                    <div ng-show="userForm.$submitted || form.firstname.$touched">

          <div ng-show="userForm.firstname.$error.required">your first Name.</div>

        </div>

                </md-input-container>
                <md-input-container class="md-block" >
                    <label>Last Name</label><input name="lastname" ng-model="user.lastname" required>
                    <div ng-show="userForm.$submitted || form.lastname.$touched" >
                        <div ng-show="userForm.lastname.$error.required">Enter last name</div>
                    </div>
                </md-input-container>
            </div>
            <md-input-container>
                <label>DOB</label>
                <md-datepicker ng-model="user.dateofbirth" name="dateofbirth" required></md-datepicker>
                <div ng-show="userForm.$submitted || form.dateofbirth.$touched ">
                    <div ng-show="userForm.dateofbirth.$error.required">Enter DOB</div>
                </div>
            </md-input-container>
            <md-input-container class="md-block"  >
                <label>Email</label><input name="mail" type="email" ng-model="user.mail" required>
                <div ng-show="userForm.$submitted || form.mail.$touched">
                    <div ng-show="userForm.mail.$error.required">Enter email ID</div>
                </div>
            </md-input-container>
            <md-input-container class="md-block"  >
                <label>Password</label><input name="paswd" type="Password" ng-model="user.paswd" required>
                <div ng-show="userForm.$submitted || form.paswd.$touched">
                    <div ng-show="userForm.paswd.$error.required">Enter your password</div>
                </div>
            </md-input-container>
            <md-input-container class="md-block">
                <label>Re-type Password</label><input name="paswdtwo" type="Password" ng-model="user.paswdtwo" required>
                <div ng-show="userForm.$submitted || form.paswdtwo.$touched">
                    <div ng-show="userForm.paswdtwo.$error.required"></div>
                </div>
            </md-input-container>
            <md-card-action layout="row" layout-align="center">
            <md-button class="md-raised md-primary" ng-click="add()">Signup</md-button>

            </md-card-action><md-card-content>
            <span ng-repeat="x in lag">
            <span ng-bind="x.firstname" ></span>
            </span>
            </md-card-content>
        </md-card>  
    </div>
</form>
</div>

This may solve ur problem

Collectives™ on Stack Overflow

Angular js Cannot read property '$setPristine' of undefined

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related