Forms in Angular

Raul Lukacs
Sep 4, 2018 · 4 min read

Angular provides 2 approaches for dealing with forms in an application: reactive forms and template-driven forms. While template-driven forms are simpler to use and are similar with the AngularJs form implementation, reactive forms are more flexible, can handle any complex scenarios, easier to unit test and they allow more component code and less HTML markup. (for more information about these always trust the official documentation)

In this post we are going to cover the following scenarios:

  1. text input
  2. select input
  3. radio group
  4. checkbox
  5. multiple checkbox selection

Now let’s get coding !


Text input

We are going to start easy and create the form with the basic text input and build on it.

First let’s write the component code.We will validate the field to be required and valid using a regex pattern.

Now let’s add the html markup.

Yay! It’s working.

Working example

Select input

Now let’s add select input that we might use when we have dropdown selection in the form. We will validate this select input to be required.

In the component we defined an array of { id, label } objects called selectOptions that will be used in the html markup for rendering the available options.

Let’s update the markup and render the select by using the array of options we defined in the component.

Added the select input to the existing form

Yay! Still working.

Working example

Radio group

Next we are going to add a radio group. Let’s use sexes for our example: male, female options.

Again we need to update our component code.

Add new field and static options

Now the html markup.

Added new radio group markup on the existing form

Let’s see it in action!


Checkbox

While building an app we definitely will have an ”I agree with the terms and conditions” checkbox and here is how we can build it.

We first add the field in the forms definition.

Then we need to update the html markup

Add checkbox to existing form

And taa daa!


Multiple checkbox selection

Lastly we are going to build a multiple checkbox selection form. For this we will need to use array function for the form builder.

For these example we need to create a custom validation function that will return if at least one options was selected or not.

Let’s see how we need to build the markup:

Added the new field in the existing form

Great! Works like a charm!

Full Working Example

The entire demo application code source can be accessed on github.

Thanks for reading! Hope it helped! And remember: when in doubt always check the angular official documentation.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade