Angular Essentials 3

Angular forms

  • Collect Data
  • Track Changes
  • Validate Data
  • Show Errors

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

Validation: built in

Validation: custom

Error handling

Made with Slides.com