Welcome Guest! (App Version 3.1)

websitnero logo name

Template Driven Forms

Description

"Template Driven Forms" have the validation logic basically present in the view (.html) file, thereby most of the logic for validation is not Unit-Testable. But, on the other side these are eazy to implement and pretty simple to code.

Practical Example of "Template Driven Forms Validation"

Please follow the mentioned steps:

  1. Create a component named 'home' and add it in the app.component.html file removing all boilerplate code there.
  2. Add the FormsModule to the app.module.ts and also add it in the imports array in the file.
  3. Add 2 inputs for 'Name' and 'Email' for a user in the home.component.html file.
  4. Add validations for 'required', 'minlength', 'maxlength' and 'pattern' in the view (.html) file only.
  5. Add some CSS styles in the home.component.css file to add color to the lines depicting error.

app.module.ts

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

import { AppComponent } from './app.component';
import { HomeComponent } from './components/home/home.component';

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

home.component.html

<div>

  <form #customForm="ngForm" (ngSubmit)="alpha(customForm)">

    <label>Enter Your Name:</label>
    <input type="text" name="fullName" ngModel #fullName="ngModel" required minlength="3" maxlength="10" /><br/>

    <div class="red" *ngIf="fullName.touched">
      <div *ngIf="fullName.errors?.required" class="error">Name is a required field!</div>
      <div *ngIf="fullName.errors?.minlength" class="error">Minimum 3 characters are required!</div>
      <div *ngIf="fullName.errors?.maxlength" class="error">Maximum characters can be 10!</div>
    </div>

    <label>Enter your Email:</label>
    <input type="text" name="email" ngModel #email="ngModel" pattern="^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" minlength="10" required /><br/>
    <div class="red" *ngIf="email.touched">
      <div *ngIf="email.errors?.required" class="error">Email is a required field!</div>
      <div *ngIf="email.errors?.minlength" class="error">Minimum 10 characters are required!</div>
      <div *ngIf="email.errors?.pattern" class="error">Please enter a valid email!</div>
    </div>

    <button type="submit" [disabled]="customForm.invalid">Submit</button>

  </form>

</div>

home.component.ts

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

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})

export class HomeComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

  alpha(formData){
    console.log(formData);
  }

}

home.component.css

label {display:inline-block;width:150px;margin-bottom:10px;}
.error {color:red;margin-bottom:10px;}
  1. Following will be the output:

  1. On clicking submit you can see the data submitted by form in console:

WebsiteNero is highly optimized for learning various website developing technlogies. We try our best to add maximum modules and examples to help learn the concepts clearly and vividly. We try to present all content and examples as simple as we can removing any complexity to hurdle easy understanding. We try best provide you with worthful content, but we cannot guarantee full correctness of all the content on this site. While using this website, you agree to have read and accepted all our terms of use and conditions, cookie, and privacy policy. Copyright, 2013-2018 by websitenero.com. All Rights Reserved.