Template-driven forms

• Easy of use
• Simple

Template-driven forms

import { NgModule } from '@angular/core';
import { BrowserModule }  from '@angular/platform-browser';
import { FormsModule } from '@angular/forms'; // <--- JavaScript import from Angular

/* Other imports */

@NgModule({
  imports: [
    BrowserModule,
    FormsModule  // <--- import into the NgModule
  ],
  /* Other module metadata */
})
export class AppModule { }

Reactive forms

• Full powered

Reactive forms

import { NgModule } from '@angular/core';
import { BrowserModule }  from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms'; // <--- JavaScript import from Angular

/* Other imports */

@NgModule({
  imports: [
    BrowserModule,
    ReactiveFormsModule // <--- import into the NgModule
  ],
  /* Other module metadata */
})
export class AppModule { }

• Form field contract
• Field validation rules
• Change tracking
• Can be unit tested