JSPM

Description:

Simple to use (Angular) textbox for controlling input while typing. You can prevent unwanted characters and force desired formats.

INSTALLATION:

Using NPM:

npm install --save sdk-textbox

CONFIGURATION:

To configure the sdk-textbox for your application, add the following lines to your app.module.ts file:

import { SDKTextboxModule } from 'sdk-textbox';

@NgModule({
    imports: [
        SDKTextboxModule
    ]
})
export class AppModule { }

USAGE:

<sdk-textbox></sdk-textbox>

List of properties:

• validCharacters (string | null): specify the type of input.
  • alpha: Only letters (upper/lower).
  • numeric: ONLY numbers.
  • alphanumeric: All letters (upper/lower) and numbers.
  • decimal: Numbers ONLY with 1 decimal (.) anywhere and 1 dash (-) at the beginning ONLY.
  • currency: Numbers ONLY with 1 decimal (.) anywhere and 1 dash (-) at the beginning ONLY.
  • ssn: Properly formatted SSN (###-##-####).
  • phone: Formatted based on pattern provided (default: (###) ###-####). *** See the validCharacters="phone" section for more information.
  • []: A "Custom" set of characters placed inside of brackets (e.g., [abc123]).
• value (string | null): specify the current value.
• pattern (string | null): specify a particular format to apply.
• locale (string): specify the locale to use for formatting (default 'en-US').
• hint (string): specify a placeholder.
• style (string): specify a style to be applied.
• class (string): specify a class to be applied.
• enterCallBackEvent: specify a callback method when the 'ENTER' key is pressed.

Examples:

<div>Alpha</div>
<sdk-textbox validCharacters="alpha"></sdk-textbox>

<div>Numeric</div>
<sdk-textbox validCharacters="numeric"></sdk-textbox>

<div>AlphaNumeric</div>
<sdk-textbox validCharacters="alphanumeric"></sdk-textbox>

<div>Decimal (with commas and 5 decimal positions)</div>
<sdk-textbox validCharacters="decimal" pattern="1.0-5"></sdk-textbox>

<div>Currency (with commas and $)</div>
<sdk-textbox validCharacters="currency"></sdk-textbox>

<div>SSN</div>
<sdk-textbox validCharacters="ssn"></sdk-textbox>

<div>Phone #</div>
<sdk-textbox validCharacters="phone" pattern="(###) ###-#### x#####"></sdk-textbox>

<div>Custom ([abc123])</div>
<sdk-textbox validCharacters="[abc123]"></sdk-textbox>

validCharacters="phone"

• You must use the # character to represent numbers (0-9).
• Segements are created by using one of the following characters:
  • space ( )
  • dash (-)
  • underscore (_)
  • forward slash (/)
  • period (.)
• Segment characters cannot be used consecutively.
• Each segment must contain at least one # character.

Examples:

<div>Phone Number with Extension</div>
<sdk-textbox validCharacters="phone" pattern="(###) ###-#### x#####"></sdk-textbox>

<div>US Phone Number with Country Code</div>
<sdk-textbox validCharacters="phone" pattern="+1 (###) ###-####"></sdk-textbox>

<div>UK Phone Number with Country Code</div>
<sdk-textbox validCharacters="phone" pattern="+44 (#) ## #### ####"></sdk-textbox>

<div>Generic Phone Number with Country Code</div>
<sdk-textbox validCharacters="phone" pattern="+## ##########"></sdk-textbox>