Angular – Reactive or Template-driven Forms?

0
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

Ajitesh Kumar

Ajitesh is passionate about various different technologies including programming languages such as Java/JEE, Javascript, PHP, .NET, C/C++, mobile programming languages etc and, computing fundamentals such as application security, cloud computing, API, mobile apps, google glass, big data etc.Recently, he has been digging deep into the field of data science and machine learning.

Follow him on Twitter and Google+.
Ajitesh Kumar

Leave A Reply

Time limit is exhausted. Please reload the CAPTCHA.