Pixelstrap - Admin Document

Forms

Validation form Preview link

First name

Looks good!

Last name

Looks good!

Username

Please choose a username.

City

Please provide a valid city.

State

Please select a valid state.

Zip

Please provide a valid zip.

Agree to terms and conditions

You must agree before submitting.

<div class="card">
  <div class="card-header pb-0">
      <h4>Tooltip form validation</h4>
      <p class="desc mb-0 mt-1"><span>If your form layout allows it, you can swap the</span><code>..&#123;valid|invalid.&#125;</code><span>-tooltip classes to display validation feedback in a styled tooltip.</span></p>
  </div>
  <div class="card-body">
    <form class="row g-3 needs-validation custom-input" novalidate="" [ngClass]="{'was-validated': validate}">
      <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" required="">
          <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" required="">
          <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">&#64;</span>
          <input class="form-control" id="validationTooltipUsername" type="text" required="">
          <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" required="">
        <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" required="">
          <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" required="">
        <div class="invalid-tooltip">Please provide a valid zip.</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 code in .ts File

import { Component } from '@angular/core';
  import { CommonModule } from '@angular/common';
  import { FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms'
  import { NgbModule } from '@ng-bootstrap/ng-bootstrap';                 

@Component({
  selector: 'app-tooltip-form-validation',
  imports: [CommonModule,NgbModule,FormsModule,ReactiveFormsModule],
  templateUrl: './tooltip-form-validation.html',
  styleUrl: './tooltip-form-validation.scss'
})
export class TooltipFormValidation {

  public validate = false;
  public tooltipValidation = false;

  public submit() {
    this.validate = !this.validate;
  }
  
  public tooltipSubmit() {
    this.tooltipValidation = !this.tooltipValidation;
  }

}

Base input Preview link

<div class="row">  
<div class="col-lg-3 col-md-6 checkbox-checked">  
  <div class="form-check-size">  
    <div class="form-check form-check-inline">  
      <input class="form-check-input me-2" id="inlineRadio1" type="radio" name="inlineRadioOptions" value="option1">  
      <label class="form-check-label" for="inlineRadio1">  Option1  </label>
    </div>
    <div class="form-check form-check-inline">  
      <input class="form-check-input me-2" id="inlineRadio2" type="radio" name="inlineRadioOptions" value="option2"  checked="">  
      <label class="form-check-label" for="inlineRadio2">  Checked  </label>
    </div>
    <div class="form-check form-check-inline">  
      <input class="form-check-input me-2" id="inlineRadio3" type="radio" name="inlineRadioOptions" value="option3" disabled="">  
      <label class="form-check-label" for="inlineRadio3">  Disabled  </label>
    </div>
  </div>
</div>
<div class="col-md-6 col-lg-3 checkbox-checked">  
  <div class="form-check-size">  
    <div class="form-check form-check-inline">  
      <input class="form-check-input me-2" id="inlineCheckbox1" type="checkbox" value="option1" checked="">  
      <label class="form-check-label" for="inlineCheckbox1">  Checked  </label>
    </div>
    <div class="form-check form-check-inline">  
      <input class="form-check-input me-2" id="inlineCheckbox2" type="checkbox" value="option2">  
      <label class="form-check-label" for="inlineCheckbox2">  Default  </label>
    </div>
    <div class="form-check form-check-inline">  
      <input class="form-check-input me-2" id="inlineCheckbox3" type="checkbox" value="option3" disabled="">  
      <label class="form-check-label" for="inlineCheckbox3">  Disabled  </label>
    </div>
  </div>
</div>
</div>

Checkbox & Radio Preview link

Option 1

Disabled

Checked

Default

Disabled

Checked

<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 class="theme-form row g-3"> 
<div class="input-group flex-nowrap">
<span class="input-group-text" id="addon-wrapping">@
</span>
<input class="form-control" type="text" placeholder="Username" aria-label="Username" aria-describedby="addon-wrapping">                </div>
</form>

Datepicker Offical link 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="" 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={{counter[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={{counter[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>

To use touchspin you have to add the Code.ts files

import { Component } from '@angular/core';
  @Component({
    selector: 'app-icons-prefix-postfix',
    imports: [],
    templateUrl: './icons-prefix-postfix.html',
    styleUrls: ['./icons-prefix-postfix.scss']
  })

  export class IconsPrefixPostfix {
  
    public counter: number[] = [0, 0];
  
    public increment(i: number) {
      if (i === 0 || i === 1) {
        this.counter[i] += 1;
      }
    }
  
    public decrement(i: number) {
      if (i === 0 || i === 1) {
        if (this.counter[i] > 0) {
          this.counter[i] -= 1;
        }
      }
    }
  }

Select2 Offical link Preview link

Default Placeholder

<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 { CommonModule } from '@angular/common';
    import { Component } from '@angular/core';
    import { FormsModule, ReactiveFormsModule } from '@angular/forms';
    import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
    import { NgSelectModule } from '@ng-select/ng-select';
  
  @Component({
    selector: 'app-select',
    imports: [CommonModule,FormsModule, ReactiveFormsModule, NgSelectModule , NgbModule],
    templateUrl: './select.html',
    styleUrl: './select.scss'
  })
  export class Select {
  
    selectedCity: string;
    selectedCityIds: string[] = [];
    selectedCityIds3: string[] = [];
    selectedCityIds2: string[] = [];
    selectedCityIds4: string[] = [];
    selectedCityIds5: string[] = [];
    selectedCityIds6: string[] = [];
    selectedCityName = 'Vilnius';
    selectedCityId: number = 0;
    selectedUserIds: number[] = [];
  
    store: boolean = true;
    cities = [
      { id: 1, name: 'Vilnius' },
      { id: 2, name: 'Kaunas' },
      { id: 3, name: 'Pavilnys', disabled: true },
      { id: 4, name: 'Pabradė' },
      { id: 5, name: 'Klaipėda' }
    ];
  
    Placeholder = [
      { id: 1, name: 'Alabama' },
      { id: 2, name: 'Wyoming' },
      { id: 3, name: 'Coming' },
      { id: 4, name: 'Hanry Die' },
      { id: 4, name: 'John Deo' },
    ];
    Placeh = [
      { id: 1, name: 'Alabama' },
      { id: 2, name: 'Wyoming' },
      { id: 3, name: 'Coming' },
      { id: 4, name: 'Hanry Die' },
      { id: 4, name: 'John Deo' },
    ];
  
    Enable(val: boolean): void {
      this.store = val;
    }
  }

You have to add the following style Scss file for the select2 design

<!-- Select 2 SCSS -->
@import "@ng-select/ng-select/themes/default.theme.css";

Typeahead Offical link 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';
  mport { CommonModule } from '@angular/common';
  import { FormsModule } from '@angular/forms';
  import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
  import { Observable, OperatorFunction } from 'rxjs';
  import { debounceTime, distinctUntilChanged, map } from 'rxjs/operators';
  
  const 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',
  ];
  
  @Component({
    selector: 'app-formatted-results',
    imports: [CommonModule,FormsModule,NgbModule],
    templateUrl: './formatted-results.html',
    styleUrls: ['./formatted-results.scss']
  })
  export class FormattedResults {
  
  public model: string
  
  formatter = (result: string) => result.toUpperCase();
  search: OperatorFunction = (text$: Observable) =>
    text$.pipe(
      debounceTime(200),
      distinctUntilChanged(),
      map((term) =>
        term === '' ? [] : states.filter((v) => v.toLowerCase().indexOf(term.toLowerCase()) > -1).slice(0, 10),
      ),
    );
  }