I haven't the toughest time resetting this form to pristine once the reset/send button is clicked! I have tried the angular.copy method, $scope.contactForm.$setPristine(); to no avail. I was getting an error stating that $scope.contactForm.$setPristine(); was undefined. Do anyone see a problem in my code!
Here is my HTML
<!-- CONTACT FORM -->
<div class="sixteen columns contact-container">
<h2>Contact Me</h2>
<p class="required">* = Required</p>
<div id="messages" data-ng-show="message">{{message}}</div>
<form name="contactForm" id="contactForm" class="contact" method="post" novalidate>
<label ng-class="{ 'has-error' : contactForm.name.$invalid && !contactForm.name.$pristine }">Name*
<input type="text" name="name" class="form-control" data-ng-model="userData.name" placeholder="Joe Blow" required>
<p data-ng-show="contactForm.name.$invalid && !contactForm.name.$pristine" class="help-block">You name is required.</p>
</label>
<label ng-class="{ 'has-error' : contactForm.email.$invalid && !contactForm.email.$pristine }">eMail*
<input type="email" name="email" class="form-control" data-ng-model="userData.email" placeholder="joe84@email.com" required>
<p data-ng-show="contactForm.email.$invalid && !contactForm.email.$pristine" class="help-block">You email is required. </p>
</label>
<label ng-class="{ 'has-error' : contactForm.comment.$invalid && !contactForm.comment.$pristine }">Comment*
<textarea name="comment" class="form-control" ng-model="userData.comments" required></textarea>
<p data-ng-show="contactForm.comment.$invalid && !contactForm.comment.$pristine" class="help-block">You comment is required.</p>
</label>
<p>
<button data-ng-click="reset()">Reset</button>
<button type="submit" ng-click="processForm()">Submit</button>
</p>
</form>
</div>
<!-- END: CONTACT FORM -->
Here is my controller
// 'use strict';
/* Controllers */
var myAppControllers = angular.module('myAppControllers', ['myServices']);
myAppControllers.controller('contactCtrl', ['$scope', '$http',
function ($scope, $http, $compile) {
console.log('contactCtrl');
// Empty object to hold input info
$scope.userData = {};
// Process Form
$scope.processForm = function () {
$http({
method: 'POST',
url: 'send-mail.php',
data: $.param($scope.userData),
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
})
.success(function () {
$scope.userData = {};
alert('Message Sent');
});
}
$scope.reset = function () {
$scope.userData = {};
console.log('Reset Clicked');
}
}
]);
Here is my suggestion:
1) Add ng-submit to the form to process the results, rather than ng-click on a button
2) change the button for reset to an input of type reset with no ng-click (try that first, if it works like I expect, it will blank all the values and that will update the model, and everything will work the way you want) - if not you can revisit the ng-click method
try
$scope.contactForm.$setPristine();
$scope.model = '';