Angularjs email form field not clearing/resetting after model binding reset

Question

Angularjs email form field not clearing/resetting after model binding reset

Hey so I have a form which has three fields name,email and phone.

    <div ng-show="Nerd.adding">
    <form class="col-sm-6" name="Nerd.nerdAddFrm" novalidate >
        <div class="form-group">
            <label for="inputName">Name</label>
            <input type="text" class="form-control" id="inputName" placeholder="Name" ng-model="Nerd.nerd.name" required >
        </div>
        <div class="form-group">
            <label for="inputEmail">Email</label>
            <input type="email" class="form-control" id="inputEmail" placeholder="Email" ng-model="Nerd.nerd.email" required >
        </div>
        <div class="form-group">
            <label for="inputPhone">Phone</label>
            <input type="text" class="form-control" id="inputPhone" placeholder="Phone" ng-model="Nerd.nerd.phone" required >
        </div>
        <button ng-click="Nerd.saveNerd(Nerd.nerd)"  type="submit" class="btn btn-primary">Submit</button>
        <button ng-click="Nerd.load()"  type="button" class="btn btn-default">Cancel</button>
    </form>
</div>

As you can see the cancel button calls a Nerd.load() function in the controller. The controller basically resets the view and resets all the binded data to the model.

    Nerd.load = function () {
    Nerd.editing = false;
    Nerd.adding = false;
    Nerd.nerd = [];
    nerdResource.query(
        function (data) {
            Nerd.nerds = data;
        }
    );
};

You can see that I am setting Nerd.nerd equal to an empty array. This should empty out the form fields data. It works fine for Name and Phone. But when I go back to the page it still shows what was last typed. There is no page reload as I am showing and hiding divs based on controller variables. EG <div ng-show="Nerd.adding">. Can anyone help me out with this?

I am on angularjs version 1.3.14. Any help on this would be great.

Thanks.

javascript
angularjs
angular-ngmodel

Answer 1

You need to attach these variables to your $scope like so:

 $scope.Nerd.load = function () {
    $scope.Nerd.editing = false;
    $scope.Nerd.adding = false;
    $scope.Nerd.nerd = [];
    nerdResource.query(
    function (data) {
        $scope.Nerd.nerds = data;
    }
    );
};

Also, I think you should set $scope.Nerd to an empty object like:

$scope.Nerd = {};

instead of setting it to an empty array. You need to use $scope when interacting with the view. This code doesn't look the angular the way it is currently written.