Angular - Clearing a form with <input type='file'>

Question

I have a form where a user can input text as well as select files (via ) I am using Angular in this project as a learning experience, and handling this form in Angular is giving me trouble.

In addition to the submit button, there is a clear button to clear the form. Most of the form can be cleared by setting the form's model to {} (IE $scope.formData = {}). This doesn't work for the file input fields though.

A little research has shown that this is some sort of security measure, not unique to Angular. Even with JQ or native JS, the option people are presenting is just to delete and replace the entire DOM element. Which in JQ would be easy enough, but I am trying to do everything in Angular, and not rely on JQ fallbacks (as I have been told that its bad practice).

I assume this will require directive, but I can't find any good examples that make it clear to me how I would use a directive to delete a DOM element and then redraw it. (Keeping in mind I need to be able to clear out only parts of a form, while retaining others).

Is deleting and then redrawing the input fields the only option? And if so, what is the best practice to do this in Angular?

Thanks.

Why redraw it, this can't do? document.getElementById('file-input').value = null — allenhwkim
– allenhwkim, Commented Jan 18, 2014 at 1:44

luismreis · Accepted Answer · 2014-01-18 01:01:21Z

3

Why not use a plain DOM form reset ?

answered Jan 18, 2014 at 1:01

luismreis

4,2882 gold badges21 silver badges11 bronze badges

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

1 Comment

DrHall Over a year ago

I suppose that works. I assumed there was some method built into Angular to do the work, and wanted to learn to do things the 'Angular Way'. But barring that being possible here, this is the second best option.

Collectives™ on Stack Overflow

Angular - Clearing a form with <input type='file'>

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related