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.

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.

<form>
<div class="form-group">
<label for="email">Mail</label>
<input type="email" id="email">
</div>
</form>

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.

<form>
<div class="form-group">
<label for="email">Mail</label>
<input
type="email"
id="email"
ngModel
name="email">
</div>
</form>

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.

<form>
<div class="form-group">
<label for="email">Mail</label>
<input
type="email"
id="email"
ngModel
name="email"
required
email
class="form-control">
</div>
</form>

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.

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