Pages UI
v5.0.1 - Pages Angular
v5.0.1 - Pages Angular
  • Getting Started
  • Layouts
  • Routing
  • Styles
  • Layout Components
    • Header
    • Menu Items
    • Sidebar
    • Horizontal Menu
    • Secondary Sidebar
    • Quick View
    • Overlay Search
  • Directives
    • Parallax
    • Retina Image
  • Bootstrap Components
  • Forms
    • Checkbox and Radio
    • Form Group
    • Input Helpers
    • Switch Toggle
    • Select
    • Select FX
    • Typeahead
    • Date Picker
    • Time Picker
    • Quill Editor
    • File Uploader
  • UI Components
    • Progress Bar
    • List View
    • Cards
    • Social Cards
    • Collapse
    • Tabs
    • Tree View
    • Sliders
    • Notifications
  • Tables / Datatables
  • Maps
  • Session and other pages
  • Service
  • Dashboards
  • Widgets
  • Charts
  • Change log
Powered by GitBook
On this page
  • Importing
  • How to use
  1. Forms

Input Helpers

Input helpers are powered by the plugin Text Mask. Please refer there documentation for further details and instructions here https://github.com/text-mask/text-mask

Importing

First import it to your app module or any submodule as you wish

import { TextMaskModule } from 'angular2-text-mask';
@NgModule({
  imports: [TextMaskModule,...]
})
export class AppModule(){}

How to use

<div class="row">
    <div class="col-lg-6">
    <h5>
    Input masks
    </h5>
    <p>These assure the user will never enter invalid phone no, email or anything that has a pattern even without validations</p>
    <br>
    <div class="form-group">
        <label>Date</label>
        <span class="help">e.g. "25/12/2013"</span>
        <input [textMask]="{mask: mask.date}" type="text" id="date" class="form-control" guide="true">
    </div>
    <div class="form-group">
        <label>Telephone</label>
        <span class="help">e.g. "(324) 234-3243"</span>
        <input [textMask]="{mask: mask.telephone}" type="text" id="phone" class="form-control">
    </div>
    <div class="form-group">
        <label>Custom</label>
        <span class="help">e.g. "23-4324324"</span>
        <input [textMask]="{mask: mask.custom}" type="text" id="tin" class="form-control">
    </div>
    <div class="form-group">
        <label>Social Security Number</label>
        <span class="help">e.g. "432-43-2432"</span>
        <input [textMask]="{mask: mask.ssn}" type="text" id="ssn" class="form-control" placeholder="You can put anything here">
    </div>
    </div>
    <div class="col-lg-6">
    <h5>Input autonumeric
    </h5>
    <p>Do you forget small things? here is something that helps to automatically placed forgotten dollar signs, decimal places and even comma separates and many more!</p>
    <br>
    <div class="form-group">
        <label>Decimal place and comma separator</label>
        <span class="help">e.g. "53,000.00"</span>
        <input type="text" [textMask]="{mask: numberMask}" class="autonumeric form-control">
    </div>
    <div class="form-group">
        <label>Weird way but works</label>
        <span class="help">e.g. "45.000,00"</span>
        <input type="text" [textMask]="{mask: wierdMask}" class="autonumeric form-control">
    </div>
    <div class="form-group">
        <label>Dollar prefix</label>
        <span class="help">e.g. "$45.50"</span>
        <input type="text" [textMask]="{mask: dollarPrefix}" class="autonumeric form-control">
    </div>
    <div class="form-group">
        <label>Range</label>
        <span class="help">e.g. "0 - 9,999"</span>
        <input type="text" [textMask]="{mask: range}" class="autonumeric form-control">
    </div>
    </div>
</div>
  //Input Examples Masks
  mask = {
    date : [/[1-9]/, /\d/,'/', /\d/, /\d/,'/', /\d/, /\d/, /\d/, /\d/],
    telephone:['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/],
    custom:[/[1-9]/, /\d/,'-', /\d/, /\d/, /\d/, /\d/, /\d/, /\d/, /\d/],
    ssn:[/[1-9]/, /\d/, /\d/,'-', /\d/, /\d/,'-', /\d/, /\d/, /\d/, /\d/],
  }
  numberMask = createNumberMask({
    prefix: '$ ',
    suffix: ''
  });
  wierdMask = createNumberMask({
    prefix: '',
    suffix: '',
    thousandsSeparatorSymbol:'.',
    allowDecimal:true,
    decimalSymbol:','
  });
  dollarPrefix = createNumberMask({
    prefix: '$ ',
    suffix: '',
    allowDecimal:true
  });
  range = createNumberMask({
    prefix: '',
    suffix: '',
    integerLimit:4
  });

PreviousForm GroupNextSwitch Toggle

Last updated 7 years ago