Forms
Validation form Preview link
<div class="card height-equal">
<div class="card-header">
<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="submit" (click)="submit()">Submit form</button>
</div>
</form>
</div>
</div>To use validation you have to add the following typescript file.
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
@Component({
selector: 'app-form-validations',
imports:[CommonModule],
templateUrl: './form-validations.component.html',
styleUrls: ['./form-validations.component.scss']
})
export class FormValidationsComponent {
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 Offical link Preview link
<label class="col-sm-3 col-form-label text-sm-end">Default</label>
<div class="col-xl-5 col-sm-9">
<div class="input-group">
<input class="datepicker-here form-control digits" placeholder="yyyy-mm-dd"
name="dp" [(ngModel)]="model" ngbDatepicker #d="ngbDatepicker"
(click)="d.toggle()">
</div>
</div>To use datepicker you have to add the following type script
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { NgbCalendar, NgbDate, NgbDateParserFormatter, NgbDateStruct, NgbDatepicker, NgbDatepickerModule } from '@ng-bootstrap/ng-bootstrap';
import { FeatherIconsComponent } from '../../../../shared/components/feather-icons/feather-icons.component';
@Component({
selector: 'app-date-picker',
imports:[FormsModule,NgbDatepickerModule,FeatherIconsComponent],
templateUrl: './date-picker.component.html',
styleUrls: ['./date-picker.component.scss']
})
export class DatePickerComponent {
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 scss file for the datepicker design
@import"/node_modules/@danielmoncada/angular-datetime-picker/assets/style/picker.min.css";
@import "/node_modules/angular-calendar/css/angular-calendar.css"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 Offical link Preview link
<div class="card-body common-flex pre-post-touchspin">
<div class="input-group">
<button class="decrement-touchspin btn-touchspin touchspin-primary" (click)="decrement(0)"><i class="fa fa-minus"></i></button><span class="input-group-text">$</span>
<input class="input-touchspin spin-outline-primary" type="number" value="{{ value[0] }}">
<button class="increment-touchspin btn-touchspin touchspin-primary" (click)="Increment(0)"><i class="fa fa-plus"> </i></button>
</div>
<div class="input-group">
<button class="decrement-touchspin btn-touchspin touchspin-primary" (click)="decrement(1)"><i class="fa fa-minus"></i></button>
<input class="input-touchspin spin-outline-primary" type="number" value="{{ value[1] }}"><span class="input-group-text">%</span>
<button class="increment-touchspin btn-touchspin touchspin-primary" (click)="Increment(1)"><i class="fa fa-plus"></i></button>
</div>
</div>
import { Component } from '@angular/core';
@Component({
selector: 'app-icons-with-prefix',
imports: [],
templateUrl: './icons-with-prefix.component.html',
styleUrls: ['./icons-with-prefix.component.scss']
})
export class IconsWithPrefixComponent {
public value : number[] = [0,0];
decrement(i : number){
if(i === 0 || i === 1){
if(this.value[i] > 1){
this.value[i] -= 1;
}
}
}
Increment(i : number){
{
if(i === 0 || i === 1){
this.value[i] += 1;
}
}
}
}
Select2 Offical link Preview link
Default Placeholder
<label class="col-form-label">Default Placeholder</label>
<span class="select2 select2-container select2-container--default select2-container--below">
<ng-select [items]="Placeholder" bindLabel="name" bindValue="id" [multiple]="true" placeholder="Select cities" [(ngModel)]="selectedCityIds">
</ng-select>
import { Component } from '@angular/core';
import { NgSelectModule } from '@ng-select/ng-select';
import { FormsModule } from '@angular/forms';
@Component({
selector: 'app-select-two',
imports: [NgSelectModule,FormsModule],
templateUrl: './select-two.component.html',
styleUrls: ['./select-two.component.scss']
})
export class SelectTwoComponent {
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' },
];
}
Typeahead Offical link Preview link
<input class="typeahead form-control" type="text" placeholder="Search for a state" [ngbTypeahead]="search">
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.component.html',
styleUrls: ['./simple-typeahead.component.scss']
})
export class SimpleTypeaheadComponent {
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),
),
);
}