Simple Angular Form — Template Driven

Photo by Pankaj Patel on Unsplash

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.

--

--

--

Founder TWD, JavaScript & ReactJS Trainer, Youtuber, Blogger

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

How to Create a Maze Puzzle

Using timeline actions to pause conditionally in Tumult Hype 4

What is an Event Loop in JavaScript? Let’s find out!

Things you all should know to become a good javascript developer

Handle React Errors with Error Boundaries

Handle React Errors with Error Boundaries

Simplifying Dependency Injection and IoC Concepts using TypeScript

Using Firebase Admin SDK with Netlify Lambda Functions

Setting Up Single Page JavaScript in Phoenix with Brunch

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
Nabendu Biswas

Nabendu Biswas

Founder TWD, JavaScript & ReactJS Trainer, Youtuber, Blogger

More from Medium

Create your first Angular APP

Angular vs React vs Vue : Which to choose for your career as a UI developer

Making Components Dynamic

HOW TO BUILD A LOGIN AND SIGN UP PAGE WITH API AUTHENTICATION IN ANGULAR