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"
    >
  

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.