CODEWITHSUNDEEP
javascriptangularjs
Whit DuBois
Whit DuBois

Reputation: 23

How to reset a form to pristine after submitted in Angular JS

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="[email protected]"     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');
        }
    }
]);

Upvotes: 1

Views: 6316

Answers (4)

Michael Sorens
Michael Sorens

Reputation: 36698

Though this is an old question, as none of the answers thus far provide a working solution, I thought it would be helpful to do so to benefit others who might have the same question. ( After all, that's why I landed here :-)

As a couple answers have indicated, in order to set a form back to Angular's notion of pristine you must call $setPristine() on the form:

$scope.contactForm.$setPristine();

You must also clear the model so that angular binding will update each form field either to empty or, as is the case with the OP here, to its cue banner (also known as watermark text, ghost text, or placeholder text):

$scope.userData = {};

By setting the model to an empty object, then any of its properties accessed in HTML (e.g. userData.name or userData.email here) will be undefined and trigger the empty/cue banner rendering.

Upvotes: 3

Ro.
Ro.

Reputation: 1753

Just reset your form like this

$scope.reset = function () {
  $scope.userData = {};
  document.getElementById("contactForm").reset();
}

Calling reset on a form goes back to pristine state.

Upvotes: 0

noel
noel

Reputation: 605

try 

$scope.contactForm.$setPristine();
$scope.model = '';

Upvotes: 0

aet
aet

Reputation: 7292

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

Upvotes: 2

Related Questions