Forms
Validation form Preview link
<div class="card">
<div class="card-header">
<h3>Tooltip form validation</h3>
<p class="f-m-light mt-1">
If your form layout allows it, you can swap the <code>.{valid|invalid}</code>-feedback classes for<code>.{valid|invalid}</code>-tooltip classes to display validation feedback in a styled tooltip. Be sure to have a parent with <code>position: relative</code> on it for tooltip positioning.</p>
</div>
<div class="card-body">
<form class="row g-3 needs-validation" novalidate="" [formGroup]="myForm" (ngSubmit)="submit()">
<div class="col-md-4 position-relative">
<label class="form-label" for="validationTooltip01">First name</label>
<input class="form-control" id="validationTooltip01" type="text" placeholder="Mark" formControlName="firstName" [ngClass]="{ 'is-invalid' : (firstName?.touched || validate) && firstName?.errors , 'is-valid' : !firstName?.errors}">
<div class="valid-tooltip">Looks good!</div>
</div>
<div class="col-md-4 position-relative">
<label class="form-label" for="validationTooltip02">Last name</label>
<input class="form-control" id="validationTooltip02" type="text" placeholder="Otto" formControlName="lastName" [ngClass]="{ 'is-invalid' : (lastName?.touched || validate) && lastName?.errors , 'is-valid' : !lastName?.errors}">
<div class="valid-tooltip">Looks good!</div>
</div>
<div class="col-md-4 position-relative">
<label class="form-label" for="validationTooltipUsername">Username</label>
<div class="input-group has-validation"><span class="input-group-text" id="validationTooltipUsernamePrepend">@</span>
<input class="form-control" id="validationTooltipUsername" type="text" aria-describedby="validationTooltipUsernamePrepend" formControlName="userName" [ngClass]="{ 'is-invalid' : (userName?.touched || validate) && userName?.errors , 'is-valid' : !userName?.errors}">
<div class="invalid-tooltip">Please choose a unique and valid username.</div>
</div>
</div>
<div class="col-md-6 position-relative">
<label class="form-label" for="validationTooltip03">City</label>
<input class="form-control" id="validationTooltip03" type="text" formControlName="city" [ngClass]="{ 'is-invalid' : (city?.touched || validate) && city?.errors , 'is-valid' : !city?.errors}">
<div class="invalid-tooltip">Please provide a valid city.</div>
</div>
<div class="col-md-3 position-relative">
<label class="form-label" for="validationTooltip04">State</label>
<select class="form-select" id="validationTooltip04" formControlName="state" [ngClass]="{ 'is-invalid' : (state?.touched || validate) && state?.errors , 'is-valid' : !state?.errors}">
<option selected="" disabled="" value="">Choose...</option>
<option>U.S </option>
<option>Thailand </option>
<option>India </option>
<option>U.K</option>
</select>
<div class="invalid-tooltip">Please select a valid state.</div>
</div>
<div class="col-md-3 position-relative">
<label class="form-label" for="validationTooltip05">Zip</label>
<input class="form-control" id="validationTooltip05" type="text" formControlName="zip" [ngClass]="{ 'is-invalid' : (zip?.touched || validate) && zip?.errors , 'is-valid' : !zip?.errors}">
<div class="invalid-tooltip">Please provide a valid zip.</div>
</div>
<div class="col-12">
<button class="btn btn-primary" type="submit">Submit form</button>
</div>
</form>
</div>
</div>To use validation you have to add the following code in .ts File
import { Component } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { CommonModule } from '@angular/common';
@Component({
selector: 'app-validation-form',
imports:[CommonModule],
templateUrl: './validation-form.html',
styleUrl: './validation-form.scss'
})
export class ValidationForm {
public validate: boolean = false;
public myForm = new FormGroup({
firstName: new FormControl('', Validators.required),
lastName: new FormControl('', Validators.required),
userName: new FormControl('', [Validators.required, Validators.email]),
city: new FormControl('', Validators.required),
state: new FormControl('', Validators.required),
zip: new FormControl('', Validators.required)
})
submit(){
this.validate = true;
if(this.myForm.valid){
window.location.reload();
}
}
get firstName(){
return this.myForm.get('firstName');
}
get lastName(){
return this.myForm.get('lastName');
}
get userName(){
return this.myForm.get('userName');
}
get city(){
return this.myForm.get('city');
}
get state(){
return this.myForm.get('state');
}
get zip(){
return this.myForm.get('zip');
}
}
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">
</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">
<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="">
<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="">
<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">
<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="">
<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="">
<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">
</div>
</div>
</form>Datepicker Preview link
<input class="form-control digits" placeholder="yyyy-mm-dd" name="dp" [(ngModel)]="model" ngbDatepicker #d="ngbDatepicker" (click)="d.toggle()">Switch Preview link
<label class="switch">
<input type="checkbox" checked="">
<span class="switch-state"></span>
</label>
<label class="switch">
<input type="checkbox">
<span class="switch-state"></span>
</label>Touchspin Preview link
<div class="input-group">
<button class="decrement-touchspin btn-touchspin touchspin-primary" (click)="changeValue(-1)"><i class="fa fa-minus"></i></button>
<input class="input-touchspin spin-outline-primary" type="number" [value]="value">
<button class="increment-touchspin btn-touchspin touchspin-primary" (click)="changeValue(1)"><i class="fa fa-plus"> </i></button>
</div>To use touchspin you have to add the following code in .ts File
// In .ts File
public value: number = 40;
changeValue(type: number){
if(type == -1){
if(this.value >= 1){
this.value -= 1;
}
}else if(type == 1){
this.value += 1;
}
}
Select2 Preview link
Default Placeholder
@ng-select/ng-select<ng-select [items]="defaultPlaceHolder" bindLabel="name" bindValue="id" [multiple]="true" placeholder="Select cities" [(ngModel)]="selectedCityIds"></ng-select>To use select you have to add the following code in .ts File
import { Component } from '@angular/core';
import { NgSelectModule } from '@ng-select/ng-select';
import { FormsModule } from '@angular/forms';
@Component({
selector: 'app-select',
imports: [NgSelectModule,FormsModule],
templateUrl: './select.html',
styleUrl: './select.scss'
})
export class Select {
public selectedCityId: number = 0;
public defaultPlaceHolder = [
{ id: 1, name: 'Alabama' },
{ id: 2, name: 'Wyoming' },
{ id: 3, name: 'Coming' },
{ id: 4, name: 'Hanry Die' },
{ id: 4, name: 'John Deo' },
];
}
Typeahead Preview link
<form class="theme-form">
<div>
<input class="typeahead form-control" type="text" placeholder="Search for a state" [ngbTypeahead]="search">
</div>
</form>To use typeahead you have to add the following code in .ts File
import { Component } from '@angular/core';
import { Observable, OperatorFunction, debounceTime, distinctUntilChanged, map, of } from 'rxjs';
import { state } from '../../../../../../shared/data/data/form-widgets/type-ahead';
import { NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'app-type-ahead',
imports:[NgbTypeaheadModule],
templateUrl: './type-ahead.html',
styleUrl: './type-ahead.scss'
})
export class TypeAhead {
public states = ['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'];
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),
),
);
}