2016-11-03 4 views
0

<!--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: [email protected] angular.js: 17334(anonymous 
 
    function)@ angular.js: [email protected] angular.js: [email protected] 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"> 
 
    \t \t \t <span ng-bind="x.firstname" ></span> 
 
      </span> 
 
      </md-card-content> 
 
     </md-card> 
 
     </div> 
 
    </div> 
 
    </form> 
 
    </script> 
 
</body> 
 

 
</html>

+0

Добро пожаловать ТАК! Что это, что вам нужно? См. Раздел [Как задать вопрос] (http://stackoverflow.com/help/how-to-ask) этого веб-сайта. –

ответ

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

<form> тег вне линий атрибутов нг-приложение/нг-контроллера. Угловое не сможет получить доступ к $ scope.userForm в вашей функции $ scope.add.

0

HTML изменения:

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

Угловые изменения:

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

UserForm не является в $ объеме, вам необходимо пройти, чтобы добавить функцию.

:)

0

Ваша форма тег вне контроллера в HTML

находится вне области видимости контроллера, так что используйте этот

<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> 

Это может решить проблему ур

Смежные вопросы