Forms
Validation form Preview link
<div class="card height-equal">
<div class="card-header card-no-border pb-0">
<h3>Validation form</h3>
<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 script tag
<!-- Validation ts -->
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
@Component({
selector: 'app-validition-form',
imports: [FormsModule,CommonModule]
templateUrl: './validition-form.html',
styleUrls: ['./validition-form.scss']
})
export class ValiditionForm {
public validate = false;
constructor() { }
ngOnInit(): void {
}
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
<form class="row row-cols-sm-auto">
<div class="col-12">
<div class="input-group">
<input
class="form-control"
placeholder="yyyy-mm-dd"
name="dp"
[(ngModel)]="model"
ngbDatepicker
#d="ngbDatepicker"
/>
<button class="btn btn-outline-secondary bi bi-calendar3" (click)="d.toggle()" type="button"></button>
</div>
</div>
</form>// in app.ts
import { Component } from '@angular/core';
import { NgbAlertModule, NgbDatepickerModule, NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';
import { FormsModule } from '@angular/forms';
import { JsonPipe } from '@angular/common';
@Component({
selector: 'ngbd-datepicker-popup',
imports: [NgbDatepickerModule, NgbAlertModule, FormsModule, JsonPipe],
templateUrl: './datepicker-popup.html',
})
export class NgbdDatepickerPopup {
}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
To use touchspin you have to add the following script files
<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>import { Component } from '@angular/core';
@Component({
selector: 'app-icon-with-prefix',
templateUrl: './icon-with-prefix.html',
styleUrls: ['./icon-with-prefix.scss']
})
export class IconWithPrefix {
public value : number[] = [0];
decrement(i : number){
if(i === 0){
if(this.value[i] > 1){
this.value[i] -= 1;
}
}
}
Increment(i : number){
{
if(i === 0){
this.value[i] += 1;
}
}
}
}Select2 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>
</span>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
<div class="card">
<div class="card-header card-no-border pb-0">
<h3>Basic typeahead</h3>
<p class="f-m-light mt-1">A typeahead example that gets values from a static <code>string[]</code></p>
</div>
<div class="card-body">
<div id="the-basics">
<form class="theme-form">
<div>
<input class="typeahead form-control" type="text" placeholder="Search for a state" [ngbTypeahead]="search">
</div>
</form>
</div>
</div>
</div>To use typeahead you have to add the following script files
<!-- Typeahead ts -->
import { Component } from '@angular/core';
import * as Data from '../../../../../shared/data/data/forms/form-widgets'
import { Observable, OperatorFunction, debounceTime, distinctUntilChanged, map, of } from 'rxjs';
@Component({
selector: 'app-simple-typeahead',
imports: [FormsModule, NgbTypeahead],
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),
),
);
}