Skip to content

webforio/ngx-advanced-input

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

ngx-advanced-input

A simple input directive with different alpha-numeric restrictions.

Installation instructions

Install ngx-advanced-input from npm:

npm install ngx-advanced-input --save

Add to Modules:

import { NgxAdvancedInputModule } from 'ngx-advanced-input';

@NgModule({
  ...
  imports: [NgxAdvancedInputModule,...]
  ...
})

Usage

Easily add advancedInput directive and choose inputType. You are done:

<input advancedInput inputType="alphaWithSpace">         

Input Types

InputType Description Example
alphaWithSpace Only Alpha Numeric Values, No Initial space, No multiple spaces together A10 B20
noFSpace Only Alpha Numeric Values with Space, allows multiple spaces A10 B20
alpha Only Alpha Numeric Values, no spaces allowed A10B10
noSpace All letters with no initial space, No multiple spaces together A10 B20 $100
number Numbers only, accept '.' 10.5
strictlyNumber Numbers only 1994
strictlyNumber Only Alpha Numeric Values, no spaces, accept underscore A10_B20
numberWithColon Numbers only, accept ':' 10:30

Example

<form class="form-horizontal">
  <div class="form-group">
    <div class="col-sm-10">
      <input advancedInput inputType="alphaWithSpace" class="form-control" placeholder="eg.  A10 B20">
      <small class="text-muted">
        Only Alpha Numeric Values, No Initial space, No multiple spaces together
      </small>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-10">
      <input advancedInput inputType="noFSpace" class="form-control" placeholder="eg. A10 B20">
      <small class="text-muted">
        Only Alpha Numeric Values with Space, allows multiple spaces
      </small>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-10">
      <input advancedInput inputType="alpha" class="form-control" placeholder="eg. A10B10">
      <small class="text-muted">
        Only Alpha Numeric Values, allows multiple spaces
      </small>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-10">
      <input advancedInput inputType="noSpace" class="form-control" placeholder="eg. A10 B20 $100">
      <small class="text-muted">
        All letters with no initial space, No multiple spaces together
      </small>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-10">
      <input advancedInput inputType="number" class="form-control" placeholder="eg. 10.5">
      <small class="text-muted">
        Numbers only, accept '.'
      </small>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-10">
      <input advancedInput inputType="strictlyNumber" class="form-control" placeholder="eg. 1994">
      <small class="text-muted">
        Numbers only
      </small>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-10">
      <input advancedInput inputType="alphaWithUnderscore" class="form-control" placeholder="eg. A10_B20">
      <small class="text-muted">
        Only Alpha Numeric Values, no spaces, accept underscore
      </small>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-10">
      <input advancedInput inputType="numberWithColon" class="form-control" placeholder="eg. 10:30">
      <small class="text-muted">
        Numbers only, accept ':'
      </small>
    </div>
  </div>
</form>

Demo

https://stackblitz.com/edit/angular-ngx-advanced-input

About

Simple directory to allow/restrict characters

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published