Categories: AngularJSWeb

Angular – Reactive or Template-driven Forms?

This article represents quick introduction to two different kind of forms which can be created in Angular 2 or Angular 4. Please feel free to comment/suggest if I missed to mention one or more important points. Also, sorry for the typos.

Following are the key points discussed later in this article:

  • Template-driven forms
  • Reactive forms

Template-driven forms

Template-driven forms are the most trivial type of form that can be quickly created in Angular 2. Following are key aspects of creating template-driven form.

  • These forms are asynchronous in nature.
  • These forms require inclusion/import of FormsModule in the root module, AppModule which is placed in the root folder of the app. Following is the sample code:
    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { FormsModule } from '@angular/forms';
    import { AppComponent } from './app.component';
    import { LoginComponent } from './login/login.component';
    
    @NgModule({
    imports: [ BrowserModule, FormsModule ],
    declarations: [ AppComponent, LoginComponent ],
    bootstrap: [ AppComponent ]
    })
    export class AppModule { }
    
  • In the form, ngModel is used for two-way data binding. Take a look at sample code given below.
      <input type="email"
             class="form-control"
             id="email"
             placeholder="Email"
             required
             [(ngModel)]="model.email"
             name="email"
      >
    
  • Validation related login is placed into the UI code. Take a look at following example where email field validation logic is placed just beside input element.
      <input type="text"
             class="form-control"
             id="fullname"
             placeholder="Full Name"
             required
             [(ngModel)]="model.fullname"
             name="fullname"
             #fullname="ngModel"
      >
      <div [hidden]="fullname.valid || fullname.pristine"
        class="alert alert-danger">
        Full name is required
      </div>
    

Reactive Forms

Reactive forms are based on reactive style of programming. Following are key aspects of reactive forms:

  • These forms are synchronous in nature unlike template-driven forms.
  • These forms require inclusion/import of ReactiveFormsModule in the root module, AppModule which is placed in the root folder of the app. Following is the sample code:
    import { NgModule }      from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { ReactiveFormsModule }   from '@angular/forms';
    
    import { AppComponent }  from './app.component';
    import { LoginComponent } from './rlogin/login.component';
    
    @NgModule({
      imports:      [ BrowserModule, ReactiveFormsModule ],
      declarations: [ AppComponent, LoginComponent ],
      bootstrap:    [ AppComponent ]
    })
    export class AppModule { }
    
  • Form controls are created and managed in component code rather than the UI unlike the template-driven forms.
  • Validation logic is placed within Component rather than the UI code as like template driven forms. Take a look at sample code given below which resides in the Component class.
    </pre>
    export class LoginComponent {
    
    formErrors = {
        'email': '',
        'password': ''
      };
    
    validationMessages = {
        'email': {
          'required': 'Email is required.'
        },
        'password': {
          'required': 'Password is required.'
        }
      };
    
    createForm() {
      this.loginForm.valueChanges
       .subscribe(data => this.onValueChanged(data));
    
      this.onValueChanged();
     }
    
     onValueChanged(data?: any) {
       if (!this.loginForm) {
        return;
       }
       const form = this.loginForm;
    
       for (const field in this.formErrors) {
        this.formErrors[field] = '';
        const control = form.get(field);
    
        if (control && control.dirty && !control.valid) {
         const messages = this.validationMessages[field];
         for (const key in control.errors) {
          this.formErrors[field] += messages[key] + ' ';
         }
        }
       }
     }
    
  • Logic related with communicating with server is delegated to services.
  • Following are key Form-related classes which are used to manage Form UI elements:
    • AbstractControl: AbstractControl represents base class from which below mentioned classes are derived.
    • FormControl: Instances of FormControl represents actual UI element.
      email = new FormControl('', Validators.required);
      
    • FormGroup: These are used to group one or more AnstractControl interfaces. Following represents a sample login form.
      loginForm = new FormGroup({
      email: new FormControl('', Validators.required)
      });
      
    • FormArray: These are used to hold AbstractConrol interfaces in an array.

 

Ajitesh Kumar

I have been recently working in the area of Data analytics including Data Science and Machine Learning / Deep Learning. I am also passionate about different technologies including programming languages such as Java/JEE, Javascript, Python, R, Julia, etc, and technologies such as Blockchain, mobile computing, cloud-native technologies, application security, cloud computing platforms, big data, etc. I would love to connect with you on Linkedin. Check out my latest book titled as First Principles Thinking: Building winning products using first principles thinking.

View Comments

Share
Published by
Ajitesh Kumar

Recent Posts

Mathematics Topics for Machine Learning Beginners

In this blog, you would get to know the essential mathematical topics you need to…

6 days ago

Questions to Ask When Thinking Like a Product Leader

This blog represents a list of questions you can ask when thinking like a product…

1 week ago

Three Approaches to Creating AI Agents: Code Examples

AI agents are autonomous systems combining three core components: a reasoning engine (powered by LLM),…

2 weeks ago

What is Embodied AI? Explained with Examples

Artificial Intelligence (AI) has evolved significantly, from its early days of symbolic reasoning to the…

2 months ago

Retrieval Augmented Generation (RAG) & LLM: Examples

Last updated: 25th Jan, 2025 Have you ever wondered how to seamlessly integrate the vast…

5 months ago

How to Setup MEAN App with LangChain.js

Hey there! As I venture into building agentic MEAN apps with LangChain.js, I wanted to…

5 months ago