Angular 6 Form Validation example – Template-driven Forms

angular-6-form-validation-example-template-driven-feature-image

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

angular-6-form-validation-example-template-driven-forms

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

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <h2>grokonez</h2>
      <h4>Template-driven Form</h4>

      <form name="form" (ngSubmit)="f.form.valid && onSubmit()" #f="ngForm" novalidate>
        <div class="form-group">
          <label for="username">Username</label>
          <input type="text" class="form-control" name="username" [(ngModel)]="form.username" #username="ngModel"
            [ngClass]="{'is-invalid': f.submitted && username.invalid}" required />
          <div *ngIf="f.submitted && username.invalid" class="invalid-feedback">
            <div *ngIf="username.errors.required">>> required</div>
          </div>
        </div>
        <div class="form-group">
          <label for="email">Email</label>
          <input type="text" class="form-control" name="email" [(ngModel)]="form.email" #email="ngModel" [ngClass]="{'is-invalid': f.submitted && email.invalid}"
            required email />
          <div *ngIf="f.submitted && email.invalid" class="invalid-feedback">
            <div *ngIf="email.errors.required">>> required</div>
            <div *ngIf="email.errors.email">>> must be a valid email address</div>
          </div>
        </div>
        <div class="form-group">
          <label for="password">Password</label>
          <input type="password" class="form-control" name="password" [(ngModel)]="form.password" #password="ngModel"
            [ngClass]="{'is-invalid':f.submitted && password.invalid}" required minlength="6" />
          <div *ngIf="f.submitted && password.invalid" class="invalid-feedback">
            <div *ngIf="password.errors.required">>> required</div>
            <div *ngIf="password.errors.minlength">>> must be at least 6 characters</div>
          </div>
        </div>
        <div class="form-group">
          <button class="btn btn-primary">Register</button>
        </div>
      </form>
    </div>
  </div>
</div>

Source Code

Angular6FormValidation-TemplateDrivenForm



By grokonez | October 4, 2018.

Last updated on May 18, 2021.



Related Posts


1 thought on “Angular 6 Form Validation example – Template-driven Forms”

  1. If in 2 pages we have forms that have some repetitive fields, should we write class data .ts in which to describe the fields
    example:
    forms.ts

    export class Forms {
        constructor(
            public flname:string,
            public email:string,
            public phone:number,
            public agreement:boolean,
            public city?:string,
            public specialty?:string,
            public sourceinfo?:string,
            public answer?:boolean,
            public diploma?:string,
            public uploadfile?:boolean,
            public community?:string,
            public employees?:number,
            public comment?:string
        ){}
    }
    

    When do we have to create class-data as forms.ts?

Got Something To Say:

Your email address will not be published. Required fields are marked *

*