Forms
Validation form Preview link
<div class="card height-equal">
<div class="card-header pb-0">
<h4>Validation form</h4>
<p class="f-m-light mt-1">Custom feedback styles apply custom colors, borders, focus styles, and background icons to
better communicate feedback.Background icons for <code><select></code>s are only available with
<code>.form-select</code> and not <code>.form-control.</code></p>
</div>
<div class="card-body">
<form class="row g-3 needs-validation custom-input" novalidate [ngClass]="{'was-validated': validate}">
<div class="col-12">
<label class="form-label" for="validationCustom01">First name</label>
<input class="form-control" id="validationCustom01" type="text" placeholder="Mark" required="">
<div class="invalid-feedback">Please enter your valid </div>
<div class="valid-feedback">
Looks's Good!</div>
</div>
<div class="col-12">
<label class="col-sm-12 col-form-label" for="inputPassword1">Password</label>
<input class="form-control" id="inputPassword1" type="password" required="">
<div class="invalid-feedback">Please enter your valid password </div>
</div>
<div class="col-12">
<label class="form-label" for="validationCustom04">State</label>
<select class="form-select" id="validationCustom04" required="">
<option selected="" disabled="" value="">Choose...</option>
<option>U.K </option>
<option>India </option>
<option>Thailand</option>
<option>Newyork</option>
</select>
<div class="invalid-feedback">Please select a valid state.</div>
<div class="valid-feedback">
Looks's Good! </div>
</div>
<div class="col-md-6">
<label class="form-label" for="validationCustom03">City</label>
<input class="form-control" id="validationCustom03" type="text" required="">
<div class="invalid-feedback">Please provide a valid city.</div>
<div class="valid-feedback">
Looks's Good!</div>
</div>
<div class="col-md-6">
<label class="form-label" for="validationCustom05">Zip</label>
<input class="form-control" id="validationCustom05" type="text" required="">
<div class="invalid-feedback">Please provide a valid zip.</div>
<div class="valid-feedback">
Looks's Good!</div>
</div>
<div class="col-12">
<div class="card-wrapper border rounded-3 checkbox-checked">
<h6 class="sub-title">Select your payment method</h6>
<div class="radio-form">
<div class="form-check">
<input class="form-check-input" id="validationFormCheck25" type="radio" name="radio-stacked" required="">
<label class="form-check-label" for="validationFormCheck25">MaterCard</label>
</div>
<div class="form-check">
<input class="form-check-input" id="validationFormCheck23" type="radio" name="radio-stacked" required="">
<label class="form-check-label" for="validationFormCheck23">VISA</label>
</div>
</div>
</div>
</div>
<div class="col-12">
<select class="form-select" required="" aria-label="select example">
<option value="">Select Your Favorite Pixelstrap theme</option>
<option value="1">Cuba</option>
<option value="2">Tivo</option>
<option value="3">Wingo</option>
</select>
<div class="invalid-feedback">Invalid select feedback</div>
</div>
<div class="col-12">
<label class="form-label" for="formFile1">Choose File</label>
<input class="form-control" id="formFile1" type="file" aria-label="file example" required="">
<div class="invalid-feedback">Invalid form file selected</div>
</div>
<div class="col-12">
<label class="form-label" for="validationTextarea">Description</label>
<textarea class="form-control" id="validationTextarea" placeholder="Enter your comment" required=""></textarea>
<div class="invalid-feedback">Please enter a message in the textarea.</div>
</div>
<div class="col-12">
<div class="form-check">
<input class="form-check-input" id="invalidCheck" type="checkbox" value="" required="">
<label class="form-check-label" for="invalidCheck">Agree to terms and conditions</label>
<div class="invalid-feedback">You must agree before submitting.</div>
</div>
</div>
<div class="col-12">
<button class="btn btn-primary" type="button" (click)="submit()">Submit form</button>
</div>
</form>
</div>
</div>
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
@Component({
selector: 'app-form-validations',
imports:[CommonModule],
templateUrl: './form-validations.html',
styleUrls: ['./form-validations.scss']
})
export class FormValidations {
public validate = false;
public submit() {
this.validate = !this.validate;
}
}
Base input Preview link
<form class="form theme-form">
<div class="card-body p-0">
<div class="row">
<div class="col">
<div class="mb-3">
<label class="form-label" for="exampleFormControlInput1">Email address</label>
<input class="form-control" id="exampleFormControlInput1" type="email" placeholder="name@example.com" data-bs-original-title="" title="">
</div>
</div>
</div>
</div>
</form>Checkbox & Radio Preview link
<div class="row">
<div class="custom-radio-ml col-lg-3 col-md-6">
<div class="form-check radio radio-primary">
<input class="form-check-input" id="radio1" type="radio" name="radio1" value="option1" data-bs-original-title="" title="">
<label class="form-check-label" for="radio1">Option<span class="digits"> 1</span></label>
</div>
<div class="form-check radio radio-primary">
<input class="form-check-input" id="radio3" type="radio" name="radio1" value="option1" disabled="" data-bs-original-title="" title="">
<label class="form-check-label" for="radio3">Disabled</label>
</div>
<div class="form-check radio radio-primary">
<input class="form-check-input" id="radio4" type="radio" name="radio1" value="option1" checked="" data-bs-original-title="" title="">
<label class="form-check-label" for="radio4">Checked</label>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="form-check checkbox mb-0">
<input class="form-check-input" id="checkbox1" type="checkbox" data-bs-original-title="" title="">
<label class="form-check-label my-0" for="checkbox1">Default</label>
</div>
<div class="form-check checkbox mb-0">
<input class="form-check-input" id="checkbox2" type="checkbox" disabled="" data-bs-original-title="" title="">
<label class="form-check-label my-0" for="checkbox2">Disabled</label>
</div>
<div class="form-check checkbox mb-0">
<input class="form-check-input" id="checkbox3" type="checkbox" checked="" data-bs-original-title="" title="">
<label class="form-check-label my-0" for="checkbox3">Checked</label>
</div>
</div>
</div>Input group Preview link
<form>
<div class="mb-3 m-form__group">
<div class="form-label">Left Addon</div>
<div class="input-group">
<span class="input-group-text">@</span>
<input class="form-control" type="text" placeholder="Email" data-bs-original-title="" title="">
</div>
</div>
</form>Datepicker Preview link
<div class="date-picker">
<input class="datepicker-here form-control digits" placeholder="yyyy-mm-dd"
name="dp" [(ngModel)]="model" ngbDatepicker #d="ngbDatepicker"
(click)="d.toggle()">
<!-- Datepicker JS -->
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { NgbCalendar, NgbDate, NgbDateParserFormatter, NgbDateStruct, NgbDatepickerModule } from '@ng-bootstrap/ng-bootstrap';
import { FeatherIcon } from '../../../../shared/component/feather-icon/feather-icon';
@Component({
selector: 'app-date-picker',
imports:[FormsModule,NgbDatepickerModule,FeatherIcon],
templateUrl: './date-picker.html',
styleUrls: ['./date-picker.scss']
})
export class DatePicker {
public showWeekNumbers = false;
public model: NgbDateStruct;
public outsideDays = 'visible';
public navigation = 'select';
public displayMonths = 2;
public hoveredDate: NgbDate | null = null;
public fromDate: NgbDate | null;
public toDate: NgbDate | null;
public placement = 'top';
public model2: NgbDateStruct;
constructor(private calendar: NgbCalendar, public formatter: NgbDateParserFormatter) {
this.fromDate = calendar.getToday();
this.toDate = calendar.getNext(calendar.getToday(), 'd', 10);
}
isHovered(date: NgbDate) {
return this.fromDate && !this.toDate && this.hoveredDate && date.after(this.fromDate) &&
date.before(this.hoveredDate);
}
isInside(date: NgbDate) { return this.toDate && date.after(this.fromDate) && date.before(this.toDate); }
isRange(date: NgbDate) {
return date.equals(this.fromDate) || (this.toDate && date.equals(this.toDate)) || this.isInside(date) ||
this.isHovered(date);
}
validateInput(currentValue: NgbDate | null, input: string): NgbDate | null {
const parsed = this.formatter.parse(input);
return parsed && this.calendar.isValid(NgbDate.from(parsed)) ? NgbDate.from(parsed) : currentValue;
}
onDateSelection(date: NgbDate) {
if (!this.fromDate && !this.toDate) {
this.fromDate = date;
} else if (this.fromDate && !this.toDate && date && date.after(this.fromDate)) {
this.toDate = date;
} else {
this.toDate = null;
this.fromDate = date;
}
}
}
You have to add the following style css file for the datepicker design
@import "./../../../node_modules/angular-calendar/scss/angular-calendar.scss"
Switch Preview link
<label class="switch">
<input type="checkbox" checked="" data-bs-original-title="" title="">
<span class="switch-state"></span>
</label>
<label class="switch">
<input type="checkbox" data-bs-original-title="" title="">
<span class="switch-state"></span>
</label>Touchspin Preview link
<div class="row">
@for (allData of touchspinData; track allData){
<div class="col-xl-6">
<div class="card">
<div class="card-header pb-0">
<h4>{{allData.title}}</h4>
<p class="f-m-light mt-1">
@if (allData.id === 0) {
Use the <code>.decrement-touchspin </code>and <code>.increment-touchspin </code>class.
}
@if (allData.id === 1) {
Use the <code>.decrement-touchspin </code>and <code>.increment-touchspin </code>class.
}
</div>
<div class="card-body common-flex">
@for (data of allData.data; track data) {
<div class="touchspin-wrapper">
<button class="decrement-touchspin btn-touchspin {{allData.class}}-{{data.color}}"
(click)="decrement(allData.id,data.id)"><i class="fa fa-minus"> </i></button>
<input class="input-touchspin spin-outline-{{data.color}}" type="number" value="{{data.value}}">
<button class="increment-touchspin btn-touchspin {{allData.class}}-{{ data.color }}"
(click)="increment(allData.id,data.id)"><i class="fa fa-plus"> </i></button>
</div>
}
</div>
</div>
</div>
}
</div>
To use touchspin you have to add the following script files
<!-- Touchspin Ts -->
import { Component } from '@angular/core';
import * as data from '../.././../../../shared/data/data/forms/form-widgets';
@Component({
selector: 'app-common-touchspin',
imports: [],
templateUrl: './common-touchspin.html',
styleUrls: ['./common-touchspin.scss']
})
export class CommonTouchspin {
public touchspinData = data.touchspin;
decrement(i: number, n: number) {
if (this.touchspinData[i].data[n].value > 0) {
this.touchspinData[i].data[n].value -= 1;
}
}
increment(i: number, n: number) {
this.touchspinData[i].data[n].value += 1;
}
}
Select2 Offical link Preview link
Default Placeholder
<ng-select [items]="Placeholder" bindLabel="name" bindValue="id" [multiple]="true" placeholder="Select cities" [(ngModel)]="selectedCityIds"></ng-select>
To use select2 you have to add the following script files
<!-- Touchspin JS -->
import { Component } from '@angular/core';
import { ColorVariant } from './color-variant/color-variant';
import { FullColorVariant } from './full-color-variant/full-color-variant';
import { NgSelectModule } from '@ng-select/ng-select';
import { FormsModule } from '@angular/forms';
@Component({
selector: 'app-select-two',
imports: [ColorVariant,FullColorVariant,NgSelectModule,FormsModule],
templateUrl: './select-two.html',
styleUrls: ['./select-two.scss']
})
export class SelectTwo {
public selectedCityIds: string[] = [];
public Placeholder = [
{ id: 1, name: 'Alabama' },
{ id: 2, name: 'Wyoming' },
{ id: 3, name: 'Coming' },
{ id: 4, name: 'Hanry Die' },
{ id: 4, name: 'John Deo' },
];
}
You have to add the following style css file for the select2 design
@import "@ng-select/ng-select/themes/default.theme.css";
Typeahead Offical link Preview link
<input class="typeahead form-control" type="text" placeholder="Search for a state" [ngbTypeahead]="search">
<!-- Typeahead Ts -->
import { Component } from '@angular/core';
import * as data from '../../../../../../shared/data/data/forms/form-widgets';
import { Observable, OperatorFunction, debounceTime, distinctUntilChanged, map } from 'rxjs';
import { NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'app-simple-typeahead',
imports:[NgbTypeaheadModule],
templateUrl: './simple-typeahead.html',
styleUrls: ['./simple-typeahead.scss']
})
export class SimpleTypeahead {
public states = data.state;
search: OperatorFunction = (text$: Observable) =>
text$.pipe(
debounceTime(200),
distinctUntilChanged(),
map((term) =>
term.length < 2 ? [] : this.states.filter((v) => v.toLowerCase().indexOf(term.toLowerCase()) > -1).slice(0, 10),
),
);
}
export const state = ['Alabama', 'Alaska', 'American Samoa', 'Arizona', 'Arkansas', 'California', 'Colorado',
'Connecticut', 'Delaware', 'District Of Columbia', 'Federated States Of Micronesia', 'Florida', 'Georgia',
'Guam', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine',
'Marshall Islands', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana',
'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',
'Northern Mariana Islands', 'Ohio', 'Oklahoma', 'Oregon', 'Palau', 'Pennsylvania', 'Puerto Rico', 'Rhode Island',
'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virgin Islands', 'Virginia',
'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'];