AngularJS reset form completely

Question

I have a pretty big form that's being validated on the client side by Angular. I am trying to figure out how to reset the state of the form and its inputs just clicking on a Reset button.

I have tried $setPristine() on the form but it didn't really work, meaning that it doesn't clear the ng-* classes to reset the form to its original state with no validation performed.

Here's a short version of my form:

<form id="create" name="create" ng-submit="submitCreateForm()" class="form-horizontal" novalidate>
    <div class="form-group">
        <label for="name" class="col-md-3 control-label">Name</label>
        <div class="col-md-9">
            <input required type="text" ng-model="project.name" name="name" class="form-control">
            <div ng-show="create.$submitted || create.name.$touched">
                <span class="help-block" ng-show="create.name.$error.required">Name is required</span>
            </div>  
        </div>
    </div>
    <div class="form-group">
        <label for="lastName" class="col-md-3 control-label">Last name</label>
        <div class="col-md-9">
            <input required type="text" ng-model="project.lastName" name="lastName" class="form-control">
            <div ng-show="create.$submitted || create.lastName.$touched">
                <span class="help-block" ng-show="create.lastName.$error.required">Last name is required</span>
            </div>
        </div>
    </div>
    <button type="button" class="btn btn-default" ng-click="resetProject()">Reset</button>
</form>

And my reset function:

$scope.resetProject = function() {
    $scope.project = {
        state: "finished",
        topic: "Home automation"
    };
    $("#create input[type='email']").val('');
    $("#create input[type='date']").val('');
    $scope.selectedState = $scope.project.state;
    // $scope.create.$setPristine(); // doesn't work
}

Also if you could help me clear the input values of the email and date fields without using jQuery would be great. Because setting the $scope.project to what's defined above doesn't reset the fields for some reason.

it doesn't clear the ng-* classes to reset the form to its original state with no validation performed — dabadaba
– dabadaba, Commented Dec 7, 2015 at 16:40
You tried $scope.create.$setUntouched(); - depending on the version you're using. — Darren Wainwright
– Darren Wainwright, Commented Dec 7, 2015 at 16:45
@Darren you're a genius that's exactly what I wanted. I guess I messed that functionality to what $setPristine() does. Post as answer and I will accept it :) — dabadaba
– dabadaba, Commented Dec 7, 2015 at 16:46

madrick · Accepted Answer · 2015-12-07 16:46:24Z

1

Try to clear via ng-model

$scope.resetProject = function() {
  $scope.project = {
      state: "finished",
      topic: "Home automation"
  };
  $("#create input[type='email']").val('');
  $("#create input[type='date']").val('');
  $scope.selectedState = $scope.project.state;

  $scope.project = {
      name: "",
      lastName: ""
  };
}

answered Dec 7, 2015 at 16:46

madrick

2211 gold badge3 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Darren Wainwright · Accepted Answer · 2015-12-07 16:47:53Z

0

As mentioned in the comments, you can use $setUntouched();

https://docs.angularjs.org/api/ng/type/form.FormController#$setUntouched

This should set the form back to it's new state.

So in this case $scope.create.$setUntouched(); should do the trick

Ref all that jquery. You should never interact with the DOM via controllers. That's what the directives are for

If you want to reset a given property then do something like:

$scope.resetProject = function() {
    $scope.project = {
        state: "finished",
        topic: "Home automation"
    };
    $scope.project.lastName = '';
   $scope.project.date= '';
}

answered Dec 7, 2015 at 16:47

Darren Wainwright

30.8k22 gold badges87 silver badges131 bronze badges

Collectives™ on Stack Overflow

AngularJS reset form completely

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related