<!--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();
};
});
&#13;
<!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>
&#13;
答案 0 :(得分:1)
<form>
标记位于ng-app / ng-controller属性行之外。 Angular无法访问$ scope.add函数中的$ scope.userForm。
答案 1 :(得分:0)
$scope.add=
function(userForm put form object)
{
$scope.user={};
};
答案 2 :(得分: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不在$ scope中,您需要传递给添加功能。
:)
答案 3 :(得分: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>
这可以解决你的问题