How do I reset a form in angularjs?
Question
See Fiddle: http://jsfiddle.net/hejado/7bqjqc2w/
I'm trying to form.reset() my form using angular.
HTML:
<div ng-controller="formCtrl">
<form name="resetme" id="resetme">
<input ng-model="text" type="text" />
<input file-model="file" type="file" />
<button type="button" ng-click="resetForm()">reset</button>
</form>
</div>
JS:
.controller('formCtrl', function($scope) {
$scope.resetForm = function() {
//$scope.resetme.reset();
document.getElementById('resetme').reset();
};
});
Please note: I'm using this kind of form to ajax-upload a file. The page is not refreshing and I don't want to use any reset-buttons. (I'm using one in the fiddle for simplicity.) I want to call the reset-function after the fileupload is finished (via http success).
I'm using
<input type="file" />
so I can't reassign empty values to all my inputs, because file inputs are readonly.
Calling the reset() function on the DOM element works, but I was told talking to the DOM in angular would be evil, so...
I'd like to know, how this would be done the angular way . I tried naming the form and referencing it via $scope. formname but I'm not able to call Web API functions... (commented line)
How can I achieve this?
UPDATE After reading some of the answers, I should make clear, that I am using ngModel and a custom directive fileModel to get a hold of the file-object.
Some of the solutions worked in resetting the value of the input field, but the model is not cleared (neither file, nor text). Custom directives are the answer to that, but this kinda exceeds the scope of this question.
6 answers
solution1
3 ACCPTED 2015-07-23 11:30:53
I wrote about this topic a couple years ago. I don't know if the Angular team has yet implemented a native form reset directive but you can do so yourself. There are a couple caveats to this implementation: it only works for one model (if you need to support more see the followup post ) and the issue of when to initialize the original values. Also, I never tested this with file inputs so I am not sure it would work with those.
There was an issue for this but it was closed due to inactivity. :/
var myApp = angular.module('myApp', []); myApp.controller('MyCtrl', ['$scope', function($scope) { $scope.myModel = { foo: 'Boop', bar: 'Beep' }; $scope.myModelCopy = angular.copy($scope.myModel); } ]); myApp.directive('resetDirective', ['$parse', function($parse) { return function(scope, element, attr) { var fn = $parse(attr.resetDirective); var masterModel = angular.copy(fn(scope)); // Error check to see if expression returned a model if (!fn.assign) { throw Error('Expression is required to be a model: ' + attr.resetDirective); } element.bind('reset', function(event) { scope.$apply(function() { fn.assign(scope, angular.copy(masterModel)); scope.form.$setPristine(); }); // TODO: memoize prevention method if (event.preventDefault) { return event.preventDefault(); } else { return false; } }); }; } ]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <body ng-app="myApp"> <div ng-controller="MyCtrl"> <form reset-directive="myModel" name="form"> <input type="text" ng-model="myModel.foo" /> <input type="text" ng-model="myModel.bar" /> <input type="reset" value="Reset" /> <pre>myModel: {{ myModel | json }}</pre> <pre>myModelCopy: {{ myModelCopy | json }}</pre> <pre>form pristine: {{ form.$pristine }}</pre> </form> </div> </body>
solution2
0 2015-07-23 11:10:43
You can try :
<a href="#" ng-click="resetForm()">reset</a>
$scope.resetForm = function(form) {
//Even when you use form = {} it does not work
form.fieldA = null;
form.fieldB = null;
///more fields
}
Or
$scope.resetForm = function(form) {
//Even when you use form = {} it does not work
angular.copy({},form);
}
solution3
0 2015-07-23 11:13:00
You'd want to attach ng-model to each of your input fields then null them out via $scope. Either that or make a custom directive
solution4
0 2015-07-23 11:45:04
If you don't want to use ng-model and proper reset type of button you can use this code, however this is not proper angular way to reset the form but it will work
$scope.reset = function(){
$('form').children('*').each(function(){
$(this).val('');
});
}
Here's the Plunker
solution5
0 2018-05-17 20:02:52
I've just had a similar problem with forms not resetting. Here's what I would do:
In your resetform() function, I would include statements that set both of your ng-models in your input to "". For example:
**HTML**
<input ng-model="text" type="text" />
<input file-model="file" type="file" />
**JS**
.controller('formCtrl', function($scope) {
$scope.resetForm = function() {
$scope.text = "";
$scope.file = null;
};
});
Not certain if this will work for file-models but I'm certain it will remove the text. Best of luck!
solution6
-2 2017-11-30 10:47:09
To reset the form data use following code :
$scope.resetEmployeeData = function() {
$scope.employeeCred.userName = '';
$scope.employeeCred.employeeNo = '';
$scope.employeeCred.sapNo = '';
$scope.employeeCred.emailD = '';
$scope.employeeCred.mobileNo = '';
**this**.createEmployee.$setPristine();
**this**.createEmployee.$setUntouched();
};
use this rather than $scope .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.