<app-page-header
title="Form Validations"
title1="Form Validations"
activeitem="Forms"
></app-page-header>
<!-- Start::row-1 -->
<div class="grid grid-cols-12 gap-6">
<div class="col-span-12">
<div class="box">
<div class="box-header">
<h5 class="box-title">Default Validation</h5>
</div>
<div class="box-body">
<form
class="ti-validation"
[formGroup]="customForm"
(ngSubmit)="Submit()"
novalidate
>
<div class="grid lg:grid-cols-2 gap-6">
<div class="space-y-2">
<label class="ti-form-label mb-0">First Name</label>
<input
type="text"
formControlName="firstname"
class="my-auto ti-form-input form-control"
placeholder="Firstname"
/>
<div
*ngIf="
customForm.controls['firstname'].invalid &&
(customForm.controls['firstname'].dirty ||
customForm.controls['firstname'].touched)
"
class="text-danger"
>
First Name is required.
</div>
</div>
<div class="space-y-2">
<label class="ti-form-label mb-0">Last Name</label>
<input
type="text"
formControlName="lastname"
class="my-auto ti-form-input form-control"
placeholder="Lastname"
/>
<div
*ngIf="
customForm.controls['lastname'].invalid &&
(customForm.controls['lastname'].dirty ||
customForm.controls['lastname'].touched)
"
class="text-danger"
>
Last Name is required.
</div>
</div>
<div class="space-y-2">
<label class="ti-form-label mb-0">Phone Number</label>
<input
type="number"
formControlName="phonenumber"
class="my-auto ti-form-input form-control"
placeholder="+91 123-456-789"
/>
<div
*ngIf="
customForm.controls['phonenumber'].invalid &&
(customForm.controls['phonenumber'].dirty ||
customForm.controls['phonenumber'].touched)
"
class="text-danger"
>
Phone Number is required.
</div>
</div>
<div class="space-y-2">
<label class="ti-form-label mb-0">Email Address</label>
<input
type="email"
formControlName="email"
class="my-auto ti-form-input form-control"
placeholder="your@site.com"
/>
<div
*ngIf="
customForm.controls['email'].invalid &&
(customForm.controls['email'].dirty ||
customForm.controls['email'].touched)
"
class="text-danger"
>
Email is required.
</div>
</div>
<div class="space-y-2">
<label class="ti-form-label mb-0">Password</label>
<input
type="password"
class="ti-form-input form-control"
placeholder="password"
required
/>
<div
*ngIf="
customForm.controls['password'].invalid &&
(customForm.controls['password'].dirty ||
customForm.controls['password'].touched)
"
class="text-danger"
>
password is required.
</div>
</div>
<div class="space-y-2">
<label class="ti-form-label mb-0">Confirm Password</label>
<input
type="password"
class="ti-form-input"
placeholder="password"
required
/>
<div
*ngIf="
customForm.controls['password'].invalid &&
(customForm.controls['password'].dirty ||
customForm.controls['password'].touched)
"
class="text-danger"
>
password is required.
</div>
</div>
<div class="space-y-2">
<label class="ti-form-label mb-0">Date Of Birth</label>
<dp-date-picker
class="ti-form-input joining-date flatpickr-input date active"
placeholder="dd-mm-yyyy"
[config]="datePickerConfig"
required="true"
>
</dp-date-picker>
<div
*ngIf="
customForm.controls['date'].invalid &&
(customForm.controls['date'].dirty ||
customForm.controls['date'].touched)
"
class="text-danger"
>
date is required.
</div>
</div>
<div class="space-y-2">
<label class="ti-form-label mb-0">Gender</label>
<ul class="flex flex-col sm:flex-row">
<li
class="ti-list-group w-full gap-x-2.5 bg-white border text-gray-800 ltr:sm:-ml-px rtl:sm:-mr-px sm:mt-0 ltr:sm:first:rounded-tr-none rtl:sm:first:rounded-tl-none ltr:sm:first:rounded-bl-lg rtl:sm:first:rounded-br-lg ltr:sm:last:rounded-bl-none rtl:sm:last:rounded-br-none ltr:sm:last:rounded-tr-lg rtl:sm:last:rounded-tl-lg dark:bg-bgdark dark:border-white/10 dark:text-white"
>
<div class="relative flex items-start w-full">
<div class="flex items-center h-5">
<input
id="ti-radio-validation-1"
name="ti-radio-validation"
type="radio"
class="ti-form-radio"
checked
required
/>
</div>
<label
for="ti-radio-validation-1"
class="ltr:ml-3 rtl:mr-3 block w-full text-sm text-gray-600 dark:text-white/70"
>
Female
</label>
</div>
</li>
<li
class="ti-list-group w-full gap-x-2.5 bg-white border text-gray-800 ltr:sm:-ml-px rtl:sm:-mr-px sm:mt-0 ltr:sm:first:rounded-tr-none rtl:sm:first:rounded-tl-none ltr:sm:first:rounded-bl-lg rtl:sm:first:rounded-br-lg ltr:sm:last:rounded-bl-none rtl:sm:last:rounded-br-none ltr:sm:last:rounded-tr-lg rtl:sm:last:rounded-tl-lg dark:bg-bgdark dark:border-white/10 dark:text-white"
>
<div class="relative flex items-start w-full">
<div class="flex items-center h-5">
<input
id="ti-radio-validation-2"
name="ti-radio-validation"
type="radio"
class="ti-form-radio"
required
/>
</div>
<label
for="ti-radio-validation-2"
class="ltr:ml-3 rtl:mr-3 block w-full text-sm text-gray-600 dark:text-white/70"
>
Male
</label>
</div>
</li>
<li
class="ti-list-group w-full gap-x-2.5 bg-white border text-gray-800 ltr:sm:-ml-px rtl:sm:-mr-px sm:mt-0 ltr:sm:first:rounded-tr-none rtl:sm:first:rounded-tl-none ltr:sm:first:rounded-bl-lg rtl:sm:first:rounded-br-lg ltr:sm:last:rounded-bl-none rtl:sm:last:rounded-br-none ltr:sm:last:rounded-tr-lg rtl:sm:last:rounded-tl-lg dark:bg-bgdark dark:border-white/10 dark:text-white"
>
<div class="relative flex items-start w-full">
<div class="flex items-center h-5">
<input
id="ti-radio-validation-3"
name="ti-radio-validation"
type="radio"
class="ti-form-radio"
required
/>
</div>
<label
for="ti-radio-validation-3"
class="ltr:ml-3 rtl:mr-3 block w-full text-sm text-gray-600 dark:text-white/70"
>
Others
</label>
</div>
</li>
</ul>
</div>
</div>
<div class="my-5">
<div class="space-y-2">
<label class="ti-form-label mb-0">Address</label>
<input
type="text"
formControlName="address"
class="my-auto ti-form-input form-control"
placeholder="Address"
required
/>
<div
*ngIf="
customForm.controls['address'].invalid &&
(customForm.controls['address'].dirty ||
customForm.controls['address'].touched)
"
class="text-danger"
>
address is required.
</div>
</div>
</div>
<div class="grid lg:grid-cols-2 gap-6">
<div class="space-y-2">
<label class="ti-form-label mb-0">City</label>
<input
type="text"
formControlName="city"
class="my-auto ti-form-input form-control"
placeholder="city"
required
/>
<div
*ngIf="
customForm.controls['city'].invalid &&
(customForm.controls['city'].dirty ||
customForm.controls['city'].touched)
"
class="text-danger"
>
city is required.
</div>
</div>
<div class="space-y-2">
<label class="ti-form-label mb-0">State</label>
<input
type="text"
formControlName="state"
class="my-auto ti-form-input form-control"
placeholder="state"
required
/>
<div
*ngIf="
customForm.controls['state'].invalid &&
(customForm.controls['state'].dirty ||
customForm.controls['state'].touched)
"
class="text-danger"
>
state is required.
</div>
</div>
<div class="space-y-2">
<label class="ti-form-label mb-0">Pincode</label>
<input
type="number"
formControlName="pincode"
class="my-auto ti-form-input form-control"
placeholder="pincode"
/>
<div
*ngIf="
customForm.controls['pincode'].invalid &&
(customForm.controls['pincode'].dirty ||
customForm.controls['pincode'].touched)
"
class="text-danger"
>
pincode is required.
</div>
</div>
</div>
<div class="my-5">
<input
type="checkbox"
pincode
class="ti-form-checkbox mt-0.5 form-check-input"
id="hs-checkbox-group-1"
required
/>
<label
for="hs-checkbox-group-1"
class="text-sm text-gray-500 ltr:ml-3 rtl:mr-3 dark:text-white/70 form-check-label"
>I agree with the
<a href="javascript:void(0);" class="text-primary hover:underline"
>terms and conditions</a
></label
>
<div
*ngIf="
customForm.controls['agreement'].invalid &&
(customForm.controls['agreement'].dirty ||
customForm.controls['agreement'].touched)
"
class="text-danger"
>
You must agree to the terms and conditions.
</div>
</div>
<button type="submit" class="ti-btn ti-btn-primary">Submit</button>
</form>
</div>
</div>
</div>
<div class="col-span-12">
<div class="box">
<div class="box-header">
<h5 class="box-title">Custom Validation</h5>
</div>
<div class="box-body">
<form
class="ti-validation"
[formGroup]="customForm"
(ngSubmit)="Submit()"
novalidate
>
<div class="grid lg:grid-cols-2 gap-6">
<div class="space-y-2">
<label class="ti-form-label mb-0">First Name</label>
<input
type="text"
formControlName="firstname"
class="my-auto ti-form-input form-control"
placeholder="Firstname"
/>
<div
*ngIf="
customForm.controls['firstname'].invalid &&
(customForm.controls['firstname'].dirty ||
customForm.controls['firstname'].touched)
"
class="text-danger"
>
First Name is required.
</div>
</div>
<div class="space-y-2">
<label class="ti-form-label mb-0">Last Name</label>
<input
type="text"
formControlName="lastname"
class="my-auto ti-form-input form-control"
placeholder="Lastname"
/>
<div
*ngIf="
customForm.controls['lastname'].invalid &&
(customForm.controls['lastname'].dirty ||
customForm.controls['lastname'].touched)
"
class="text-danger"
>
Last Name is required.
</div>
</div>
<div class="space-y-2">
<label class="ti-form-label mb-0">Phone Number</label>
<input
type="number"
formControlName="phonenumber"
class="my-auto ti-form-input form-control"
placeholder="+91 123-456-789"
/>
<div
*ngIf="
customForm.controls['phonenumber'].invalid &&
(customForm.controls['phonenumber'].dirty ||
customForm.controls['phonenumber'].touched)
"
class="text-danger"
>
Phone Number is required.
</div>
</div>
<div class="space-y-2">
<label class="ti-form-label mb-0">Email Address</label>
<input
type="email"
formControlName="email"
class="my-auto ti-form-input form-control"
placeholder="your@site.com"
/>
<div
*ngIf="
customForm.controls['email'].invalid &&
(customForm.controls['email'].dirty ||
customForm.controls['email'].touched)
"
class="text-danger"
>
Email is required.
</div>
</div>
<div class="space-y-2">
<label class="ti-form-label mb-0">Password</label>
<input
type="password"
class="ti-form-input form-control"
placeholder="password"
required
/>
<div
*ngIf="
customForm.controls['password'].invalid &&
(customForm.controls['password'].dirty ||
customForm.controls['password'].touched)
"
class="text-danger"
>
password is required.
</div>
</div>
<div class="space-y-2">
<label class="ti-form-label mb-0">Confirm Password</label>
<input
type="password"
class="ti-form-input"
placeholder="password"
required
/>
<div
*ngIf="
customForm.controls['password'].invalid &&
(customForm.controls['password'].dirty ||
customForm.controls['password'].touched)
"
class="text-danger"
>
password is required.
</div>
</div>
<div class="space-y-2">
<label class="ti-form-label mb-0">Date Of Birth</label>
<input type="date" class="ti-form-input joining-date date active" id="date">
<div
*ngIf="
customForm.controls['date'].invalid &&
(customForm.controls['date'].dirty ||
customForm.controls['date'].touched)
"
class="text-danger"
>
date is required.
</div>
</div>
<div class="space-y-2">
<label class="ti-form-label mb-0">Gender</label>
<ul class="flex flex-col sm:flex-row">
<li
class="ti-list-group w-full gap-x-2.5 bg-white border text-gray-800 ltr:sm:-ml-px rtl:sm:-mr-px sm:mt-0 ltr:sm:first:rounded-tr-none rtl:sm:first:rounded-tl-none ltr:sm:first:rounded-bl-lg rtl:sm:first:rounded-br-lg ltr:sm:last:rounded-bl-none rtl:sm:last:rounded-br-none ltr:sm:last:rounded-tr-lg rtl:sm:last:rounded-tl-lg dark:bg-bgdark dark:border-white/10 dark:text-white"
>
<div class="relative flex items-start w-full">
<div class="flex items-center h-5">
<input
id="ti-radio-validation-6"
name="ti-radio-validation"
type="radio"
class="ti-form-radio"
checked
required
/>
</div>
<label
for="ti-radio-validation-6"
class="ltr:ml-3 rtl:mr-3 block w-full text-sm text-gray-600 dark:text-white/70"
>
Female
</label>
</div>
</li>
<li
class="ti-list-group w-full gap-x-2.5 bg-white border text-gray-800 ltr:sm:-ml-px rtl:sm:-mr-px sm:mt-0 ltr:sm:first:rounded-tr-none rtl:sm:first:rounded-tl-none ltr:sm:first:rounded-bl-lg rtl:sm:first:rounded-br-lg ltr:sm:last:rounded-bl-none rtl:sm:last:rounded-br-none ltr:sm:last:rounded-tr-lg rtl:sm:last:rounded-tl-lg dark:bg-bgdark dark:border-white/10 dark:text-white"
>
<div class="relative flex items-start w-full">
<div class="flex items-center h-5">
<input
id="ti-radio-validation-4"
name="ti-radio-validation"
type="radio"
class="ti-form-radio"
required
/>
</div>
<label
for="ti-radio-validation-4"
class="ltr:ml-3 rtl:mr-3 block w-full text-sm text-gray-600 dark:text-white/70"
>
Male
</label>
</div>
</li>
<li
class="ti-list-group w-full gap-x-2.5 bg-white border text-gray-800 ltr:sm:-ml-px rtl:sm:-mr-px sm:mt-0 ltr:sm:first:rounded-tr-none rtl:sm:first:rounded-tl-none ltr:sm:first:rounded-bl-lg rtl:sm:first:rounded-br-lg ltr:sm:last:rounded-bl-none rtl:sm:last:rounded-br-none ltr:sm:last:rounded-tr-lg rtl:sm:last:rounded-tl-lg dark:bg-bgdark dark:border-white/10 dark:text-white"
>
<div class="relative flex items-start w-full">
<div class="flex items-center h-5">
<input
id="ti-radio-validation-5"
name="ti-radio-validation"
type="radio"
class="ti-form-radio"
required
/>
</div>
<label
for="ti-radio-validation-5"
class="ltr:ml-3 rtl:mr-3 block w-full text-sm text-gray-600 dark:text-white/70"
>
Others
</label>
</div>
</li>
</ul>
</div>
</div>
<div class="my-5">
<div class="space-y-2">
<label class="ti-form-label mb-0">Address</label>
<input
type="text"
formControlName="address"
class="my-auto ti-form-input form-control"
placeholder="Address"
required
/>
<div
*ngIf="
customForm.controls['address'].invalid &&
(customForm.controls['address'].dirty ||
customForm.controls['address'].touched)
"
class="text-danger"
>
address is required.
</div>
</div>
</div>
<div class="grid lg:grid-cols-2 gap-6">
<div class="space-y-2">
<label class="ti-form-label mb-0">City</label>
<input
type="text"
formControlName="city"
class="my-auto ti-form-input form-control"
placeholder="city"
required
/>
<div
*ngIf="
customForm.controls['city'].invalid &&
(customForm.controls['city'].dirty ||
customForm.controls['city'].touched)
"
class="text-danger"
>
city is required.
</div>
</div>
<div class="space-y-2">
<label class="ti-form-label mb-0">State</label>
<input
type="text"
formControlName="state"
class="my-auto ti-form-input form-control"
placeholder="state"
required
/>
<div
*ngIf="
customForm.controls['state'].invalid &&
(customForm.controls['state'].dirty ||
customForm.controls['state'].touched)
"
class="text-danger"
>
state is required.
</div>
</div>
<div class="space-y-2">
<label class="ti-form-label mb-0">Pincode</label>
<input
type="number"
formControlName="pincode"
class="my-auto ti-form-input form-control"
placeholder="pincode"
/>
<div
*ngIf="
customForm.controls['pincode'].invalid &&
(customForm.controls['pincode'].dirty ||
customForm.controls['pincode'].touched)
"
class="text-danger"
>
pincode is required.
</div>
</div>
</div>
<div class="my-5">
<input
type="checkbox"
pincode
class="ti-form-checkbox mt-0.5 form-check-input"
id="hs-checkbox-group-2"
required
/>
<label
for="hs-checkbox-group-2"
class="text-sm text-gray-500 ltr:ml-3 rtl:mr-3 dark:text-white/70 form-check-label"
>I agree with the
<a href="javascript:void(0);" class="text-primary hover:underline"
>terms and conditions</a
></label
>
<div
*ngIf="
customForm.controls['agreement'].invalid &&
(customForm.controls['agreement'].dirty ||
customForm.controls['agreement'].touched)
"
class="text-danger"
>
You must agree to the terms and conditions.
</div>
</div>
<button type="submit" class="ti-btn ti-btn-primary">Submit</button>
</form>
</div>
</div>
</div>
</div>
<!-- End::row-1 -->