UrbanPro
true

Learn Angular.JS from the Best Tutors

  • Affordable fees
  • 1-1 or Group class
  • Flexible Timings
  • Verified Tutors

Search in

Angular 4 Forms: Template Driven Approach

Suprasanna Bhaumik
05/09/2017 0 0

Angular Forms:

Forms in Angular 4 can be designed on two approaches.

As you can see below , we have a Template based design and the other being a Reactive based design.

Here we will try to understand the Template based design:

In the template driven approach all the functionalities are added to the Form(HTML).

To get started with the template driven approach, we need to import the FormsModule from '@angular/forms' and import them into our application module file.

Now let us consider the below HTML code: 

  • As soon as Angular sees the form tag it understands that it has to create the Javascript object representing our form. So to make it understand that this is indeed an Angular form we have marked the Local reference (f)  as ngForm.  ngForm is a directive provided by Angular and has numerous functions related to forms.
  • We have two input fields "username" and "email". To make the Angular form know that these fields are required in the javascript form object , we have to add ngModel. ngModel marks these parameters for the Angular form. 
  • The Javascript Form object maintains a key value pair of the form controls. So we need to provide the key (the value is marked by the ngModel) which is the name attribute in the form elements. E.g. Checkout the name attribute in our input tags.
  • We can also see that we don't have an action attribute mentioned in our form. This is because, we do not want to hit any service before validating our form.
  • Submit button click does not have any function call on it. However we can see that there is a (ngSubmit) directive, that takes advantage of the default Javascript behaviour and has a callback function to handle our event.

With the above changes made into our HTML we are ready to access the Javascript Form object in our typescript file.

The Typescript file:

  • We can access the Form element by passing the local reference( in our case f )                     
  • To access the Javascript Form object we need to use ngForm                                             
  • One other alternative is to use the ViewChild property that also gives us the same Javascript form object.                                                                                                   

A typical Javascript form object is shown below: 

For more details into the other aspects of Form handling such as Validators, setting default values, using the form object, Reactive Forms and many more, register for my Angular 4 course.

Thanks and Happy Reading!

0 Dislike
Follow 1

Please Enter a comment

Submit

Other Lessons for You

Some good resources
Clean Code by Robert C Martin, is available in my profile please download and read it, irrespective of what language you code in, it will change the way you code. Also if you code in Javascript read https://12factor.net/ https://blog.risingstack.com/javascript-clean-coding-best-practices-node-js-at-scale/ For...

Features of Angular JS:
Data Binding Structural Programming TDD Support Parallel Development Routing for SPA Dependency Injuction Client Side State Managment Product of Google

$rootScope in Angular JS
$rootScope refers to an object which is accessible from everywhere of the application. You can think $rootScope as global variable which can be accessible in all controllers, services, directives. The...
P

What's New in Angular 8?
The latest features introduced during the Angular 8 release candidate stage include: Smaller bundles, CLI APIs, and alignment with the ecosystem AngularJs Migration Improvements Route Configurations...
K

Kumar

0 0
0

Mark And Sweep Algorithm in Javascript Memory Management
This algorithm reduces the definition of "an object is not needed anymore" to "an object is unreachable". This algorithm assumes the knowledge of a set of objects called roots (In JavaScript, the root...
X

Looking for Angular.JS Classes?

The best tutors for Angular.JS Classes are on UrbanPro

  • Select the best Tutor
  • Book & Attend a Free Demo
  • Pay and start Learning

Learn Angular.JS with the Best Tutors

The best Tutors for Angular.JS Classes are on UrbanPro

This website uses cookies

We use cookies to improve user experience. Choose what cookies you allow us to use. You can read more about our Cookie Policy in our Privacy Policy

Accept All
Decline All

UrbanPro.com is India's largest network of most trusted tutors and institutes. Over 55 lakh students rely on UrbanPro.com, to fulfill their learning requirements across 1,000+ categories. Using UrbanPro.com, parents, and students can compare multiple Tutors and Institutes and choose the one that best suits their requirements. More than 7.5 lakh verified Tutors and Institutes are helping millions of students every day and growing their tutoring business on UrbanPro.com. Whether you are looking for a tutor to learn mathematics, a German language trainer to brush up your German language skills or an institute to upgrade your IT skills, we have got the best selection of Tutors and Training Institutes for you. Read more