I'm facing an issue while attempting to reset a textbox using the $setPristine function in AngularJS. Despite my efforts, I am not seeing the intended behavior.
This is how my form is structured:
<form name="addInviteForm" ng-controller="InviteCtrl" ng-submit="sendInvitation(userEmail)">
Pristine? {{addInviteForm.$pristine}}
<!-- email input -->
<div>
<input type="email" name="email" ng-model="userEmail" placeholder="Enter email here" class="line-item-input see" required>
<span class="error" ng-show="addInviteForm.email.$error.email" style="color:red">Invalid Email</span>
</div>
<!-- submit button -->
<input type="submit" name="send" class="btn btn-success center" value="Send Invitation">
</form>
Here is the corresponding code snippet from my controller:
$scope.sendInvitation = function(userEmail) {
// carry out necessary operations ...
// despite trying this approach, it doesn't seem to be effective
$scope.addInviteForm.$setPristine();
};
While the form initially indicates that $pristine is set to true upon entry, and then changes to false when data is entered in the text box, after submission the form reverts back to showing $pristine as true .... however, the text-box still retains its previous value.
What could possibly be missing in my implementation?