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;
}
}
}
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
Post a Comment