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.

Answer 1

Why not use a plain DOM form reset ?