Angular Forms: How to clear an input field

A quick tutorial on how to clear an input field when you're done with it

I have been working on a few different Angular applications lately. It has been a ton of fun because I have learned so much and I have come across some real world problems that I can’t wait to share with you. 

Angular Forms

In today’s post, we are talking all about Angular Forms. I was working on a tasks applications that allowed you to add new tasks. When a new task was added I wanted to clear the form out so you could quickly add another one. I ran into a problem doing so and I wanted to share that problem and my solution with you today.

My Tasks Project

The application I am working on is a simple tasks application. It is broken down into 3 components

  1. Tasks – Main tasks component that has 2 subcomponents.
  2. Add Task – A way for you to add a new task
  3. Task List – A way to display all of the components. 

If you want to check out the project you can grab it on Github.

Angular Forms

The first thing we have is the template for the add task form and it looks something like this. You will notice that we have an event handler for when the user hits the enter key. When that happens we will call a method onTaskAdd and pass in the event. 

In this simple demo, we are creating a new task with the value from the input and calling a service to save the task. 

This was working great but after the task was saved I need a way to clear the input so the user could type another task and save it. This seemed like a great opportunity for property binding to work its magic. In the add task component, I would set up a value for the input field and initialize it to an empty string. 

Then in the template, I would set the value to that property. 

Finally, when we add a new task I thought I could simply set that value back to an empty string. 

This didn’t work and it left me scratching my head. 

Angular Forms: Clearing an input field

While the solution above didn’t work I knew I was headed in the right direction. The next thing I tried was to set the string to a null value or an empty string with a space in it. 

This actually works the very first time that you try it but it will not work on subsequent tries. 

ngModel

If you have done any work with forms in Angular you have probably come across the ngModel directive. What does the ngModle directive do? 

Creates a FormControl instance from a domain model and binds it to a form control element.

The FormControl instance will track the value, user interaction, and validation status of the control and keep the view synced with the model. If used within a parent form, the directive will also register itself with the form as a child control.

The problem with the approach we did above is that it is only property binding and not event binding. Angular doesn’t run change detection because no event is fired. If you we use ngModel to bind our value to our form control we can get the answer we were looking for. Now we are using 2-way data binding with [()]syntax (also known as ‘banana-box syntax’), the value in the UI will always be synced back to the domain model in your class as well.

Now when we add a new task we can set our value to an empty string and Angular updates the input for us.

Conclusion

Angular gives us some really awesome ways to handle forms but there are some gotchas when you’re trying to move from a submitting to a server to a single page application approach. 

Question: What do you like or don’t like about working with forms in Angular? What are your toughest challenges? 

Hi, I’m Dan Vega. I am a Software Engineer living just outside of one of my favorite places in the world, Cleveland, Ohio. I am a self-taught programmer who firmly believes that you can accomplish anything in this life if you put your mind to it, roll up your sleeves and are willing to put in the work.

I have been writing software for over 18+ years now and I use my knowledge, passion, and influence to help other developers achieve their goals. I teach online and currently, have over 30,000 students.

When I am not writing software, I have a number of things that really keep me busy. I love to read books, listen to podcasts and watch online courses. I have a real thirst for knowledge and it consumes me every single day of the week. I also love to run & lift heavy weights which keep me balanced throughout the week.

Please note: I reserve the right to delete comments that are offensive or off-topic.