Forms in Angular
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:
- text input
- select input
- radio group
- checkbox
- 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.

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.

Yay! Still working.

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.

Now the html markup.

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

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:

Great! Works like a charm!

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.