Reset after submitting to AngularJS

Question

I am having problems returning form fields after submitting to AngularJS (v1.1.3). Here is 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 any other way for reset form elements?

Answer 1

Thought about it 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 = ''; }); }; 

Answer 2

Just select the default value for 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 the controller

 var deafualtForm = { name : '', department : '' } $scope.reset= function(paper) { $scope.paper = angular.copy(deafualtForm); }