1

I have the following:

<form name="editor">
    <h2>Create/Update</h2>
    {{ editor.title.$error.required }}
    <div ng-class="{ 'has-error': editor.title.$invalid && editor.title.$dirty, 'has-success': editor.title.$valid }" class="form-group">
        <input type="text" name="title" ng-model="project.title" placeholder="title" required class="form-control">
        <span class="input-icon fui-check-inverted" ng-show="editor.title.$valid"></span>
    </div>
    {{ editor.description.$error.required }}
    <div ng-class="{ 'has-error': editor.description.$invalid && editor.description.$dirty, 'has-success': editor.description.$valid }" class="form-group">
        <textarea name="description" ng-model="project.description" placeholder="description" required class="form-control"></textarea>
        <span class="input-icon fui-check-inverted" ng-show="editor.description.$valid"></span>
    </div>
    <button ng-click="save()" type="submit" class="btn btn-primary btn-embossed">Save</button>
    <button type="reset" class="btn btn-inverse">Reset</button>
    <a href="#/">Back</a>
</form>

I follow "JavaScript Projects" tutorial on angular website main page. I've added reset button to detail.html. The problem is it's behavior. When I cleaning fields by myself, the validation fails, but when I click on the reset button, fields are cleaning up but the form remaining valid. Is that an angular bug? And how get it fixed?

Improve this question
2
  • Why reset anyway? I never understood the reason and have never come across a situation where I needed one. Half the time I hit them and empty my form out accidentally. Do you really need it? Commented Apr 14, 2014 at 20:12
  • @Phix, no i don't, but this behavior seems strange. Commented Apr 15, 2014 at 6:14

1 Answer 1

Reset to default
1

I believe what you're looking for is $setPristine();

$setPristine();

Sets the form to its pristine state.

This method can be called to remove the 'ng-dirty' class and set the form to its pristine state (ng-pristine class). This method will also propagate to all the controls contained in this form.

Setting a form back to a pristine state is often useful when we want to 'reuse' a form after saving or resetting it.

via http://docs.angularjs.org/api/ng/type/form.FormController

Example JS

$scope.data = {
    "username": "", 
    "password" : ""
};

$scope.reset = function() {
  $scope.data.username = "";
  $scope.data.password = "";
  $scope.form.$setPristine();
};

Example Markup

<form name="form" id="form" novalidate>
        <input name="username" ng-model="data.username" placeholder="Name" required/>
        <input name="password" ng-model="data.password" placeholder="Password" type="password" required/>
        <div>
            <hr />
            <button class="button" ng-click="">Login</button>
            <button class="button" ng-click="reset()">Reset</button>
        </div>
</form>

Demo http://plnkr.co/edit/xTQLQH8mCCkY0tIX6n8Y?p=preview

Update : simplified solution

If you wish to do away with the controller function reset(), you could set type="reset" as originally done, but still need to $setPristine() on ng-click

<button class="button" type="reset" ng-click="form.$setPristine()">Reset</button>

new plunk: http://plnkr.co/edit/tNKPyyMboAQjeURn6m6W?p=preview

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

3 Comments

Well, yeah. You can't think of this as a traditional form; it's not. It's tied to an external model. If you want it to be aware of any possible changes, you need to make your controller aware. I've simplified the solution in an update above if you aren't keen on a reset() function in your controller.
Well, this actually didn't help me. My form is actually dynamically bound to the actual object the user picked on a list. So, what I am to achieve is, upon the user editing the data, and then changing his mind, that it would be possible to hit reset and then the original values would be restored. Still looking how to accomplish this in an easy way, without having to recur to something like a memento.
@IgorDonin - you could store the user-added value to localStorage. Then, your reset function would do something like this: $scope.data.username = localStorage.getItem('username') || "" ;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.