while resetting the field values, the form is not getting to the initial state

Question

I am clearing all the fields when reset button is clicked. However the form state is not being set to initial state. There is some error. I am changing the color of the text if it is ng-valid or ng-invalid. Once the field values are reset how to bring the form to the initial state.

HTML Code

    <style>
    input.ng-invalid {
            border: 1px solid #FCD8C8;

        }
        input.ng-valid {
            border: 1px solid  #B3F7BC;
            background-color: #E7F2E9;
        }

    </style>
<div ng-controller="DBController">
        <div style="display:inline-block;vertical-align:top;aligh:right;float:right">
                <button >Save</button>
                <button ng-click="resetDashboard()">Reset </button>
            </div>


        <form name="DashboardForm" ng-model="DashboardForm" novalidate class="css-form">
        <br>

        <p>Title:   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="text" name="title" ng-model="dashboard.title" required ng-minlength="3" ng-maxlength="20">
        <span style="color:red" ng-show="DashboardForm.title.$invalid">
        <span ng-show="DashboardForm.title.$error.required">required.</span>
        <span ng-show="DashboardForm.title.$error.minlength">Title is too short.</span> 
        <span ng-show="DashboardForm.title.$error.maxlength">Title is too long.</span>  
        </span>

        <br>

        <p>Description: &nbsp;&nbsp;&nbsp;
        <input type="textarea" style="border-radius:3px;width:300px;height:30px" name="description" ng-model="dashboard.description"  ng-minlength="3" ng-maxlength="1050" required>
        <span style="color:red" ng-show="DashboardForm.description.$invalid">
            <span ng-show="DashboardForm.description.$error.required">required.</span>
            <span ng-show="DashboardForm.description.$error.minlength">Description is too short.</span> 
            <span ng-show="DashboardForm.description.$error.maxlength">Description is too long.</span>  
        </span>
        </p>

        </form>
</div>

JS CODE

    ;(function() {
        "use strict";
         angular.module('App')
        .controller('DBController', ['$scope', '$log','$window', 
                                        function($scope, $log,window) {

            $scope.title = null;
            $scope.description = null;

            var defaultdashboardForm = {
                  title : "",
                  description : ""
              };

            $scope.resetDashboard = function()
            {
                $scope.dashboard.title='';
                $scope.dashboard.description='';
            }

        }]);
    })();

Problem Plunkr

That is because you have use `ng-minlength` which is not adding value inside your `ng-model` ..Take a look at this http://stackoverflow.com/a/28338146/2435473 will give you idea what is going on behind the scene — Pankaj Parkar, Aug 13 '15 at 08:52
thanks pankaj. now how do i clear a value but still is valid. I had set as null. Why was this not happening when the form is loaded. At that time there was no value assigned to the textbox. — krishna_v, Aug 13 '15 at 09:01
Have you read my answer thoroughly...then only you will come to know why it is happening. — Pankaj Parkar, Aug 13 '15 at 09:02

score 1 · Accepted Answer · edited May 23 '17 at 11:58

1

Why your approach doesn't work. you could find that answer with Explanation here

You could solve this do this doing some sort of hack. Before clearing value of ng-model value make them valid and then clear out the value of ng-model

$scope.resetDashboard = function() {
    //make field valid so that that gets filled into the ng-model & we can clear it.
    $scope.DashboardForm.title.$setValidity('minlength', false)
    $scope.DashboardForm.description.$setValidity('minlength', false)
    $scope.dashboard.title = '';
    $scope.dashboard.description = '';
}

Working Plunkr

edited May 23 '17 at 11:58

Community

1
1

answered Aug 13 '15 at 09:22

Pankaj Parkar

134,766
23
234
299

thanks pushkar. i got a wonderful answer on how to resolve this from this link http://stackoverflow.com/questions/27191744/setpristine-not-working. I tried it and it is working fine. the scope varaibles had to be reset once the ng-dirty class is reset with pristine state. – krishna_v Aug 13 '15 at 09:24
You could accept mine answer if it does work..bdw I'm Pankaj not pushkar – Pankaj Parkar Aug 13 '15 at 09:37
got confused with parkar to pushkar... apologies pankaj. – krishna_v Aug 13 '15 at 09:40
@user2010243 no probs..Glad to help you..THanks :) – Pankaj Parkar Aug 13 '15 at 09:53

score 0 · Answer 2 · answered Aug 13 '15 at 08:50

0

Have you tried using the $scope.DashboardForm.$setPristine(true)?

$setPristine

answered Aug 13 '15 at 08:50

Denison Luz

3,575
23
25

i tried that. What i would want is the backcolor of the text boxes should be set to white as it was when the form is loaded. Now there is a color added to the input text boxes which is not getting removed. – krishna_v Aug 13 '15 at 08:53

while resetting the field values, the form is not getting to the initial state

2 Answers2