javascript - How do I reset a form in angularjs? -
see fiddle: http://jsfiddle.net/hejado/7bqjqc2w/
i'm trying form.reset() 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 kind of form ajax-upload file. page not refreshing , don't want use reset-buttons. (i'm using 1 in fiddle simplicity.) want call reset-function after fileupload finished (via http success).
i'm using
<input type="file" /> so can't reassign empty values inputs, because file inputs readonly.
calling reset() function on dom element works, told talking dom in angular evil, so...
i'd know, how done angular way. tried naming form , referencing via $scope.formname i'm not able call web api functions... (commented line)
how can achieve this?
update after reading of answers, should make clear, using ngmodel , custom directive filemodel hold of file-object.
some of solutions worked in resetting value of input field, model not cleared (neither file, nor text). custom directives answer that, kinda exceeds scope of question.
i wrote this topic couple years ago. don't know if angular team has yet implemented native form reset directive can yourself. there couple caveats implementation: works 1 model (if need support more see followup post) , issue of when initialize original values. also, never tested file inputs not sure work those.
there issue closed due 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 see if expression returned model if (!fn.assign) { throw error('expression required 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>
Comments
Post a Comment