Simple Angular Form — Template Driven

I had recently moved to Angular at work after working in React for quite sometime. Unlike React where we generally use third party form components like Redux Forms, angular have all things out of the box. It have two type of forms — Template Driven and Reactive. We will create a simple Template Driven here.

We need to build a form with below instructions.

Add a Form with the following Inputs (and Validators)
1) Mail address (should not be empty and should be an email address)
2) A Dropdown which allows the user to select from three different Subscriptions (“Basic”, “Advanced”, “Pro”)
Set “Advanced” as Default
3) A Password field (should not be empty)
4) A Submit Button
Display a warning message if the Form is invalid AND was touched. Display a warning message below each input if it’s invalid.
Upon submitting the form, you should simply print the Value of the Form to the Console.

We have a basic Angular 6 project as our starting point.

Image for post
Image for post
Basic Setup

Let’s start with creating an email field. Notice that we are using bootstrap in our project, so using form-group and other bootstrappy thing to style.

This is a plain old HTML email field. To register it as a control in our Angular form we will add ngModel to it. We will also require to have a name to it. So, our form now become like below.

We should also have Validators in it. So, we will add the HTML validator required and the Angular validator email to it. Will also add a bootstrap class form-control to make it look nice.

You can read the rest of the article from my site. The link for the same is below.

The complete code for the same can be found here.

Written by

UI Lead- ReactJS, JavaScript and everything in-between.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store