Get Your Forms Under Control

Are you ready to take your forms to the next level? React.js gives you the ability to have a ‘controlled form’. A controlled form makes our forms a little bit smarter. In this article I will show you how to setup a simple controlled form and some use cases that takes advantage of the power of controlled forms.

What is a Controlled Form?

Normal HTML Forms are able to handle their own state. Whenever we use an input tag of some kind in a form, the form knows what it's holding aka value. One of the wonderful things about react, is how components can manage their own state. When we use a traditional form, in a react component, in a way there are two different states being managed, state of the component and state of the HTML form. Controlled forms remove this separation. When we combine the two we are able to allow our component to manage the state and also control how the form operates.

Lets Create

Know we know what a controlled form is, let's create one. Let's take this plain HTML form and convert it to a controlled form together.

Our component knows that contains a form but has no control over this form currently. Let's first start by adding our inputs to state. I created name and favNumber in the component's state to keep track of the form inputs.

Now we need to connect our components state to the form. We can do this by setting the value of the inputs to the input’s representation in our state.

Know if we go back to our form in our browser and try to type nothing happens! This is by design. Our React Component is now in complete control over our form input. Even tho we are typing into the field, our state never changes. This causes the input value to just stay blank. We need to add an onChange EventListner to update state as we are typing. This will have state be updated on every keystroke.

Now if we type into our form, we can see that state is updating our input fields with every keystroke. The last thing we need to do is change the way we submit our form. We can do this by adding an onSubmit EventListener to our form. We need to make sure to include this in our form tag so that way we can either click the submit button or press enter to submit our form.

Thats it! Converting a plain html form to a controlled form is quick and easy. Once you do it a couple of times it becomes automatic.

Control Form Example

Now that our component controls our input fields with state, what extra power does this give us. We can have the ultimate control over our fields. For example what if our form inputs was name and favorite 3 digit number? We can use our component to make sure that our favNumber field is never bigger than 3 digits and must be at least 3 digits to submit the form. We can do this by adding conditionals to our callback functions on our EventListners.

I added a conditional to check if the value of our input is larger than 3 and it will no longer edit state, thus causing the input field to remain the same. Make sure you use <= and not just <. The <= will allow the user to backspace and type a new number. I also added a conditional to our handleSubmit callback function. This conditional will check our state to make sure our favNumber has 3 digits. If everything is correct great if not it will show an alert to notify the user.

This is just one simple example of the power of controlled forms. What other uses can you think of?