Reset form after submission in AngularJS

Question

I'm having trouble resetting form fields after submitting in AngularJS (v1.1.3). Here's a snippet of what I'm trying to do:

HTML

<form name="addMemberForm">
    <input name="name" type="text" placeholder="Jon Doe" ng-model="member.name" required/></td>
    <a class="btn btn-primary" ng-click="createMember(member)" ng-disabled="addMemberForm.$invalid"><i class="icon-plus"></i></a>
</form>

JS

$scope.createMember = function(member) {
    var membersService = new Members(member);
    membersService.$create(function(member) {
        $scope.members.push(member);
        $scope.addMemberForm.reset(); //TypeError: Object #<FormController> has no method 'reset'
    });
};

Is there another way to reset form elements?

Set the scope var member.name to null or empty string (member.name="") — tschiela
– tschiela, Commented Apr 20, 2013 at 20:18
Hm that doesn't work. I'm trying to reset all the input elements in the form not the data in the scope. — jesal
– jesal, Commented Apr 20, 2013 at 20:23
but to reset the scope is the common way to that. Or the view is not in sync to the model. — tschiela
– tschiela, Commented Apr 20, 2013 at 20:25
Ah ok I think you are right, I had to do $scope.member = ''; — jesal
– jesal, Commented Apr 20, 2013 at 20:35

jesal · Accepted Answer · 2013-04-20 20:41:47Z

5

Figured it out thanks to @tschiela's comment. I had to do this:

$scope.createMember = function(member) {
    var membersService = new Members(member);
    membersService.$create(function(member) {
        $scope.members.push(member);
        $scope.member = '';
    });
};

answered Apr 20, 2013 at 20:41

jesal

7,9786 gold badges54 silver badges56 bronze badges

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

1 Comment

Jim Clouse Over a year ago

The same worked for me. I simply set $scope.MyObject to null in my form submit method.

sourcecode · Accepted Answer · 2014-10-10 06:38:47Z

Just Take default value of the form .

HTML form

<form novalidate id="paperForm"  class="form-horizontal" name="formPaper">
<div class="form-group">
<label class="col-sm-3 control-label" for="name">
    Name
</label>
<div class="col-sm-8">
    <input type="text" id="name" placeholder="Please Enter Name"  class="form-control" ng-model="paper.name" ng-name="name" required>
</div>

<label class="col-sm-3 control-label" for="name">
    Department
</label>
<div class="col-sm-8">
    <input type="text" id="department" placeholder="Please Enter Department"  class="form-control" ng-model="paper.department" ng-name="department" required>
</div>

</div>

 <button type="button" class="btn btn-default" ng-click="reset(paper)">Reset</button>

</form>

set reset code inside controller

var deafualtForm = {
name : '',
department : ''
}

$scope.reset= function(paper) {
$scope.paper = angular.copy(deafualtForm);
}

Collectives™ on Stack Overflow

Reset form after submission in AngularJS

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related