Angular6-Simple-Form-Validation

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

app.component.html
<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 [class.is-invalid]="name.invalid && name.touched" class="form-control" [(ngModel)]="userModel.name">

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

    <div class="form-group">
      <label>Email</label>
      <input #email="ngModel"  [class.is-invalid]="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)]="userModel.email">
       <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>
    </div>

    <div class="form-group">
      <label>Phone</label>
      <input type="tel" #phone="ngModel" required name="phone" pattern="^\d{10}$" [class.is-invalid]="phone.invalid && phone.touched" class="form-control" [(ngModel)]="userModel.phone">
     <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>
    </div>

    <div class="form-group">
       <label>Interest</label>
      <select required class="custom-select"  #topic="ngModel" name="topic" [class.is-invalid]="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>
      </select>
      <small class="text-danger" [class.d-none]="topic.valid || topic.untouched">Please choose a topic</small>
    </div>

   <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>
      <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>
         <div *ngIf="gender?.errors && (gender?.invalid && gender?.touched)">
       <small class="text-danger">Gender is required</small>
      
     </div>
     
    </div>

    <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
      </label>
      <br>
 <div *ngIf="subscribe.errors?.required && subscribe.touched">
       <small class="text-danger">Promotional offer is required</small>
      
     </div>
     

    </div>
 <div class="form-group">
      <label>Comments</label>
       <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>
      
     </div>
     

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

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

}
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 { }

Leave a Reply

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