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