CODEWITHSUNDEEP
javascriptformsangularjsvalidation
SaulTigh
SaulTigh

Reputation: 933

AngularJS does not proper handle button type="reset"?

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?

Upvotes: 1

Views: 4045

Answers (1)

couzzi
couzzi

Reputation: 6366

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

Upvotes: 1

Related Questions