It is very easy to add validation with angular 6. In angular 6 there are two types of form but in this section i will discuss template driven form TDF In this post iam validating basic form validation using TDF Demo

<div class="container-fluid">
  <h2>Basic form validation in Angular 6</h2>
  <form #userForm="ngForm">

    <div class="form-group">
      <label >Name</label>
      <input type="text" #name="ngModel" name="name" required []="name.invalid && name.touched" class="form-control" [(ngModel)]="">

 <small class="text-danger" [class.d-none]="name.valid || name.untouched">Name is required</small>

    <div class="form-group">
      <input #email="ngModel"  []="name.invalid && name.touched" required type="email" pattern="[a-zA-Z0-9_.+-][email protected][a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$" name="email" class="form-control" [(ngModel)]="">
       <div *ngIf="email.errors && (email.invalid && email.touched)">
       <small class="text-danger" *ngIf="email.errors.required">Email is required</small>
       <small class="text-danger" *ngIf="email.errors.pattern">Enter valid email</small>

    <div class="form-group">
      <input type="tel" #phone="ngModel" required name="phone" pattern="^\d{10}$" []="phone.invalid && phone.touched" class="form-control" [(ngModel)]="">
     <div *ngIf="phone.errors && (phone.invalid && phone.touched)">
       <small class="text-danger" *ngIf="phone.errors.required">Phone number is required</small>
       <small class="text-danger" *ngIf="phone.errors.pattern">Phone must be number and 10 digit</small>

    <div class="form-group">
      <select required class="custom-select"  #topic="ngModel" name="topic" []="topic.invalid && topic.touched" [(ngModel)]="userModel.topic">
        <option [ngValue]="null">I am interested in</option>
        <option *ngFor="let topic of topics" value="{{ topic }}">{{ topic }}</option>
      <small class="text-danger" [class.d-none]="topic.valid || topic.untouched">Please choose a topic</small>

   <div class="form-check mb-3">
      <label>Gender </label>
      <div class="form-check">
        <input class="form-check-input" #gender="ngModel" required name="gender" type="radio" [(ngModel)]="userModel.gender"  value="male">
        <label class="form-check-label">Male</label>
      <div class="form-check">
        <input class="form-check-input" #gender="ngModel" required name="gender" type="radio" [(ngModel)]="userModel.gender" value="female" >
        <label class="form-check-label">Female</label>
         <div *ngIf="gender?.errors && (gender?.invalid && gender?.touched)">
       <small class="text-danger">Gender is required</small>

    <div class="form-check mb-3">
      <input class="form-check-input" required name="subscribe" #subscribe="ngModel"  [(ngModel)]="userModel.subscribe" type="checkbox" >
      <label class="form-check-label">
        Send me Promotional offers
 <div *ngIf="subscribe.errors?.required && subscribe.touched">
       <small class="text-danger">Promotional offer is required</small>

 <div class="form-group">
       <textarea required #comment="ngModel" class="form-control" [(ngModel)]="userModel.comment" name="comment" rows="3"></textarea>
 <div *ngIf="comment.errors?.required && comment.touched">
       <small class="text-danger">Comment is required</small>

    <button class="btn btn-primary" [disabled]="userForm.form.invalid" type="submit">Submit form</button>

export class User {
        public name: string,
        public email: string,
        public phone: number,
        public topic: string,
        public gender: string,
        public subscribe: boolean,
        public comment: string,
    ) {}
import { Component } from '@angular/core';
import { User } from './user';
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
export class AppComponent {
   topics = ['Angular', 'React', 'Vue'];
     userModel = new User('', '', null, null, '', false,'');

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

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

  declarations: [
  imports: [
  providers: [],
  bootstrap: [AppComponent]
export class AppModule { }

Leave a Reply

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