Angular 6 Form Validation example – Template-driven Forms

https://grokonez.com/frontend/angular/angular-6/angular-6-form-validation-example-template-driven-forms

Angular 6 Form Validation example – Template-driven Forms

In this tutorial, we're gonna make a Form Validation example with Angular 6 Template-driven Forms.

Related Post: Angular 6 Form Validation example – Reactive Forms

Example Overview

Our form has 3 fields:

• Username: check existence
• Email: check existence, then check email format
• Password: check existence, then check if at least 6 characters

Instructional Video

Practice Code

Modules

app.module.ts

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

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Component

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  form: any = {};

  constructor() { }

  onSubmit() {
    console.log('email=' + this.form.email);
    console.log('username=' + this.form.username);
    console.log('password=' + this.form.password);
  }
}

Template

app.component.html

More at:

https://grokonez.com/frontend/angular/angular-6/angular-6-form-validation-example-template-driven-forms

Angular 6 Form Validation example – Template-driven Forms