Registration form validation in Ionic 4

How to set validation in registration form using Ionic 4



In this post we will learn everything about Ionic forms and input validations in Ionic apps.




Step 1 :-

First we will create a blank Ionic 4 project, using below command :-

ionic start myApp blank


Step 2 :-

Open "myApp" project, In this project we will open "index.html". In this file we will add bootstrap cdn library :-

Index.html :-

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="utf-8" />
  <title>Ionic App</title>
  <base href="/" />
  <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <meta name="format-detection" content="telephone=no" />
  <meta name="msapplication-tap-highlight" content="no" />
  <link rel="icon" type="image/png" href="assets/icon/favicon.png" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> 
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
</head>
<body>
  <app-root></app-root>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</body>
</html>


Step 3 :-

now we will create a page that's name will be "Registration", write below command to create a page :-

ionic generate page registration

when we will run this command then this page routing will automatically add in "app-routing.module.ts".

app-routing.module.ts :-

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  { path: '', redirectTo: 'registration', pathMatch: 'full' },
  { path: 'registration', loadChildren: './registration/registration.module#RegistrationPageModule' }
];
@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }


Step 4 :-

now open "registration.module.ts", here we will add some setting see below.

registration.module.ts :-

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule,ReactiveFormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';
import { IonicModule } from '@ionic/angular';
import { RegistrationPage } from './registration.page';

const routes: Routes = [
  {
    path: '',
    component: RegistrationPage
  }
];
@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    IonicModule,
    RouterModule.forChild(routes)
  ],
  declarations: [RegistrationPage]
})
export class RegistrationPageModule {}


Step 5 :-

now we will write html code in "registration.page.html".

registration.page.html :-

<ion-header>
  <ion-toolbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-toolbar>
</ion-header>
<ion-content padding>
  <form [formGroup]="RegisterForm" (ngSubmit)="onSubmit()">
      <div class="form-group">
          <ion-label>Title</ion-label>
          <ion-select formControlName="title" class="form-control">
              <ion-select-option value="Mr">Mr</ion-select-option>
              <ion-select-option value="Mrs">Mrs</ion-select-option>
              <ion-select-option value="Miss">Miss</ion-select-option>
              <ion-select-option value="Ms">Ms</ion-select-option>
          </ion-select>
          <div *ngIf="submitted && f.title.errors">
              <div *ngIf="f.title.errors.required">Title is required</div>
          </div>
      </div>
      <div class="form-group">
        <ion-label>First Name</ion-label>
        <ion-input type="text" formControlName="firstName" class="form-control"></ion-input>
        <div *ngIf="submitted && f.firstName.errors" class="invalid-feedback">
            <div *ngIf="f.firstName.errors.required">First Name is required</div>
        </div>
      </div>
      <div class="form-group">
        <ion-label>Mobile number</ion-label>
        <ion-input type="text" formControlName="mobile" class="form-control"></ion-input>
          <div *ngIf="submitted && f.mobile.errors" class="invalid-feedback">
              <div *ngIf="f.mobile.errors.required">Mobile number is required</div>
              <div *ngIf="f.mobile.errors.pattern">Mobile number require 10 digit</div>
          </div>
      </div>
      <div class="form-group">
          <ion-label>Email</ion-label>
          <ion-input type="text" formControlName="email" class="form-control"></ion-input>
          <div *ngIf="submitted && f.email.errors" class="invalid-feedback">
              <div *ngIf="f.email.errors.required">Email is required</div>
              <div *ngIf="f.email.errors.email">Email must be a valid email address</div>
          </div>
      </div>
      <div class="form-group">
          <ion-label>Gender</ion-label>
          <ion-radio-group formControlName="gender">
            <ion-item>
              <ion-label>Male</ion-label>
              <ion-radio value="M"></ion-radio>
            </ion-item>
            <ion-item>
              <ion-label>Female</ion-label>
              <ion-radio value="F"></ion-radio>
            </ion-item>
          </ion-radio-group>
          <div *ngIf="submitted && f.gender.errors" class="invalid-feedback">
              <div *ngIf="f.gender.errors.required">Gender is required</div>
          </div>
      </div>
      <div class="form-group">
          <ion-label>Age</ion-label>
          <ion-input type="number" formControlName="age" class="form-control"></ion-input>
          <div *ngIf="submitted && f.age.errors" class="invalid-feedback">
              <div *ngIf="f.age.errors.required">Age is required</div>
              <div *ngIf="f.age.errors.ageBetween">Age should be between 18 and 100</div>
          </div>
      </div>
      <div class="form-group">
          <ion-label>Website</ion-label>
          <ion-input type="text" formControlName="website" class="form-control"></ion-input>
          <div *ngIf="submitted && f.website.errors" class="invalid-feedback">
              <div *ngIf="f.website.errors.required">Website is required</div>
              <div *ngIf="f.website.errors.pattern">Please put correcr Website</div>
          </div>
      </div>
      <div class="form-group">
          <ion-label>DOB</ion-label>
          <ion-input type="date" formControlName="dob" class="form-control"></ion-input>
          <div *ngIf="submitted && f.dob.errors" class="invalid-feedback">
            <div *ngIf="f.dob.errors.required">DOB is required</div>
            <div *ngIf="f.dob.errors.dobValidate">Please select correct date</div>
          </div>
      </div>
      <div class="form-group">
        <ion-label>Start Date</ion-label>
        <ion-input type="date" formControlName="startDate" class="form-control"></ion-input>
        <div *ngIf="submitted && f.startDate.errors" class="invalid-feedback">
          <div *ngIf="f.startDate.errors.required">Start Date is required</div>
        </div>
      </div>
      <div class="form-group">
        <ion-label>End Date</ion-label>
        <ion-input type="date" formControlName="endDate" class="form-control"></ion-input>
        <div *ngIf="submitted && f.endDate.errors" class="invalid-feedback">
          <div *ngIf="f.endDate.errors.required">End Date is required</div>
          <div *ngIf="f.endDate.errors.StEnDateValidator">End Date cant before start date</div>
        </div>
      </div>
      <div class="form-group">
          <ion-label>Password</ion-label>
          <ion-input type="password" formControlName="password" class="form-control"></ion-input>
          <div *ngIf="submitted && f.password.errors" class="invalid-feedback">
              <div *ngIf="f.password.errors.required">Password is required</div>
              <div *ngIf="f.password.errors.minlength">Password must be at least 6 characters</div>
              <div *ngIf="f.password.errors.maxlength">Password must be at under 10 characters</div>
          </div>
      </div>
      <div class="form-group">
          <ion-label>Confirm Password</ion-label>
          <ion-input type="password" formControlName="confirmPassword" class="form-control"></ion-input>
          <div *ngIf="submitted && f.confirmPassword.errors" class="invalid-feedback">
              <div *ngIf="f.confirmPassword.errors.required">Confirm Password is required</div>
              <div *ngIf="f.confirmPassword.errors.pwdEquivalent">Passwords must match</div>
          </div>
      </div>
      <div class="form-group">
        <ion-label>Select Image</ion-label>
        <ion-input type="file" formControlName="image" (change)="uploadImage($event)" class="form-control"></ion-input>
        <div *ngIf="submitted && f.image.errors" class="invalid-feedback">
          <div *ngIf="f.image.errors.required">Image is required</div>
        </div>
        <div *ngIf="imgExtentionValidation">Image must be png or jpg</div>
        <div *ngIf="imgSizeValidation">Image size must be less than 1 MB</div>
      </div>
      <div class="form-group">
        <ion-label>Select Video</ion-label>
        <ion-input type="file" formControlName="video" (change)="uploadVideo($event)" class="form-control"></ion-input>
        <video
              *ngIf="videoUrl"
              width="320" 
              height="240" 
              controls [attr.src]="videoUrl"
              (loadedmetadata)="getDuration($event)"></video> 
        <div *ngIf="submitted && f.video.errors" class="invalid-feedback">
          <div *ngIf="f.video.errors.required">Video is required</div>
        </div>
        <div *ngIf="videoExtensionValidation">Video must be mp4</div>
        <div *ngIf="videoSizeValidation">Video size must be less than 1 MB</div>
        <div *ngIf="vidoDurationValidation">Video duration must be less than 1 min</div>
      </div>
      <div class="form-group">
        <ion-label>Select Hobbies</ion-label>
        <div [formArrayName]="'hobbyItems'">
          <ion-item *ngFor="let control of f.hobbyItems.controls; let i = index;" [formGroup]="control">
            <ion-checkbox slot="end" formControlName="checkbox" id="{{ control.controls.id.value }}"></ion-checkbox>
            <ion-label attr.for="{{ control.controls.id.value }}">{{ control.controls.text.value }}</ion-label>
          </ion-item>
        </div>
        <div *ngIf="submitted && f.hobbySelectedItems.errors">
          <div *ngIf="f.hobbySelectedItems.errors.required">Hobby is required</div>
          <div *ngIf="f.hobbySelectedItems.errors.minlength">At least 2 Hobby is required</div>
        </div>
      </div>
      <div class="form-group">
        <ion-label>Please accept T&C</ion-label>
        <ion-item>
          <ion-checkbox slot="end" formControlName="acceptTerms"></ion-checkbox>
          <ion-label for="acceptTerms" class="form-check-label">Accept Terms & Conditions</ion-label>
        </ion-item>
        <div *ngIf="submitted && f.acceptTerms.errors" class="invalid-feedback">Accept Ts & Cs is required</div>
      </div>
      <div class="text-center">
          <ion-button class="btn btn-secondary" type="submit">Register</ion-button>
          <ion-button class="btn btn-secondary" type="reset" (click)="onReset()">Cancel</ion-button>
      </div>
  </form>
</ion-content>


Step 6 :-

now we will write ts code in "registration.page.ts".

registration.page.ts :-

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators, FormControl, AbstractControl, FormArray } from '@angular/forms';
import { Router, NavigationExtras } from '@angular/router';
import { DatePipe, formatDate } from '@angular/common';
import { DomSanitizer } from '@angular/platform-browser';

@Component({
  selector: 'app-registration',
  templateUrl: './registration.page.html',
  styleUrls: ['./registration.page.scss'],
})

export class Registration1Page implements OnInit {

  RegisterForm: FormGroup;

    submitted = false;
    mobileNumber = "^[0-9]{10}$";
    websitePattern = "(https?://)?([\\da-z.-]+)\\.([a-z.]{2,6})[/\\w .-]*/?";

    hobbies = [
        {key: 'cricket', text: 'Cricket'},      
        {key: 'hockey', text: 'Hockey'},      
        {key: 'vollyball', text: 'Vollyball'},     
        {key: 'football', text: 'Football'},
      ];

    imgExtentionValidation = false;
    imgSizeValidation = false;
    videoExtensionValidation = false;
    videoSizeValidation = false;
    vidoDurationValidation = false;
    videoUrl;

    constructor(private formBuilder: FormBuilder,private sanitizer:DomSanitizer) { }

    ngOnInit() {
        let hobbyCheckboxGroup = new FormArray(this.hobbies.map(item => new FormGroup({
            id: new FormControl(item.key),      
            text: new FormControl(item.text),   
            checkbox: new FormControl(false)    
          })));
        let hobbyHiddenControl = new FormControl(this.mapItems(hobbyCheckboxGroup.value), Validators.compose([Validators.required, Validators.minLength(2)]));
        hobbyCheckboxGroup.valueChanges.subscribe((v) => {
            hobbyHiddenControl.setValue(this.mapItems(v));
        });
        this.RegisterForm = this.formBuilder.group({
            title: ['', Validators.required],
            firstName: ['', Validators.required],
            mobile:['',[Validators.required,Validators.pattern(this.mobileNumber)]],
            email: ['', [Validators.required, Validators.email]],
            gender:['',Validators.required],
            password: ['', [Validators.required, Validators.minLength(6),Validators.maxLength(10)]],
            confirmPassword: ['', Validators.required],
            acceptTerms: [false, Validators.requiredTrue],
            age:['',[this.AgeValidator]],
            website:['',[Validators.required,Validators.pattern(this.websitePattern)]],
            dob:['',[Validators.required,this.DobValidator]],
            endDate:['',Validators.required],
            startDate:['',[Validators.required]],
            image:['',Validators.required],
            video:['',Validators.required],
            hobbyItems: hobbyCheckboxGroup,
            hobbySelectedItems: hobbyHiddenControl
        },
        {
            validator: Validators.compose([
                this.MustMatchPwd('password','confirmPassword'),
                this.compareTwoDates('startDate','endDate')
            ])
        }
        );
    }
    get f() { return this.RegisterForm.controls; }
    mapItems(items) {
        let selectedItems = items.filter((item) => item.checkbox).map((item) => item.id);
        return selectedItems.length ? selectedItems : null;
    }
    onSubmit() {
        this.submitted = true;
        console.log(this.RegisterForm.controls['selectedItems']);
        if (this.RegisterForm.invalid) {
            return;
        }
        alert('SUCCESS!! :-)\n\n' + JSON.stringify(this.RegisterForm.value, null, 4));
    }
    onReset() {
        this.submitted = false;
        this.RegisterForm.reset();
    }
    MustMatchPwd(pwd,conPwd){
        return (control:AbstractControl):{[key:string]:boolean} | null=>{
            const p = control.get(pwd);
            const cp = control.get(conPwd);
            if(p.value !== cp.value){
                cp.setErrors({pwdEquivalent:true});
                return {pwdEquivalent:true}
            }
            return null;
        }
    }
    AgeValidator(control:AbstractControl):{[key:string]:boolean} | null{
        if(+control.value>=18 && +control.value<=100){
            return null;
        }
        return {'ageBetween':true};
    }
    DobValidator(control:AbstractControl):{[key:string]:boolean} | null{
        var userSelectedDate = control.value;
        var currentDate = formatDate(new Date(),'yyyy-MM-dd','en_US');
        if(userSelectedDate>currentDate){
            return {'dobValidate':true};
        }
        return null;
    }
    compareTwoDates(startDate,endDate){
        return (control:AbstractControl):{[key:string]:boolean} | null=>{
            const sd = control.get(startDate);
            const ed = control.get(endDate);
            if(ed.value < sd.value){
                ed.setErrors({StEnDateValidator:true});
                return {StEnDateValidator:true}
            }
            return null;
        }
    }
    uploadImage(event:any){
        let files = event.target.files;
        let fileName = files[0].name;
        let fileSize = files[0].size;
        let ext = fileName.substring(fileName.lastIndexOf('.')+1);
        if(
            ext.toLowerCase()!='png' && ext.toLowerCase()!='jpg' && ext.toLowerCase()!='jpeg'
        )
        { 
            const imageControl = this.RegisterForm.controls['image'];
            imageControl.setErrors(
                {'imgValidation':true}
            );
            this.imgExtentionValidation = true;
        }
        else if(fileSize>1048576){
            const imageControl = this.RegisterForm.controls['image'];
            imageControl.setErrors(
                {'imgValidation':true}
            );
            this.imgSizeValidation = true;
        }
        else{
            this.imgExtentionValidation = false;
            this.imgSizeValidation = false;
        }
    }
    uploadVideo(event:any){
        let files = event.target.files;
        let fileName = files[0].name;
        let fileSize = files[0].size;
        let ext = fileName.substring(fileName.lastIndexOf('.')+1);
        this.videoUrl = this.sanitizer.bypassSecurityTrustUrl(URL.createObjectURL(files[0]));
        if(ext.toLowerCase()!='mp4'){
            const videoControl = this.RegisterForm.controls['video'];
            videoControl.setErrors(
                {'videoValidation':true}
            );
            this.videoExtensionValidation = true;
        }
        else if(fileSize>1048576){
            const videoControl = this.RegisterForm.controls['video'];
            videoControl.setErrors(
                {'videoValidation':true}
            );
            this.videoSizeValidation = true;
        }
        else{
            this.videoExtensionValidation = false;
            this.videoSizeValidation = false;
        }
    }
    getDuration(e){
        const duration = e.target.duration;
        if(duration>30){
            const videoControl = this.RegisterForm.controls['video'];
            videoControl.setErrors(
                {'videoValidation':true}
            );
            this.vidoDurationValidation = true;
        }
        else{
            this.vidoDurationValidation = false;
        }
    }
}

Comments

Popular posts from this blog

Call CRUD(GET, POST, PUT, DELETE) API using WebClient in c#

Asp.Net MVC 5 authentication and authorization using claims principal