Controls library – Angular 6+ form controls library.

For angular 6+ versions apps. Custom controls for input currency, percents, positive numbers.

Installation.

Run for installation Components Library in your project.

npm install controls-library --save

Add in import section in your module

ControlsLibraryModule

Don't forget import this module:

import { ControlsLibraryModule } from 'controls-library';

Number range input form control.

Add form tag in your template with defined form group name.

<form [formGroup]="formGroup">

or use single as single form control with formControl attribute.

Add

<number-range-input></number-range-input>

tag for use number range input in your template form.

Number range input form control attributes.

• containerClass – Div container css class.

• inputId – Input form field id.

• controlClass – Css class name for input.

• additionalClass – Additional css class for input.

• range – String with range in 0..100 format (negative number ranges not tested). Contains min and max values.

• placeholder – Input placeholder string.

• prefix – Template prefix before input form control (TemplateRef).

• suffix – Template suffix after input form control (TemplateRef).

Example usage template part.

<form [formGroup]="form">

  <ng-template #numberRangeLabel>
    <label for="rangeInput">Number range input</label><br>
  </ng-template>

  <number-range-input
    containerClass="input-group"
    inputId="rangeInput"
    controlClass="range"
    formControlName="range"
    placeholder="range test"
    range="1..100"
    [prefix]="numberRangeLabel"
    [suffix]="numberRangeError"
    [additionalClass]="form.get('range').hasError('required') ? 'additional-class' : ''">
  </number-range-input>

  <ng-template #numberRangeError>
    <div>
      Required
    </div>
  </ng-template>

</form>

Currency input form control.

Currency input form field depends on defined user's locale.

Add form tag in your template with defined form group name.

<form [formGroup]="formGroup">

or use single as single form control with formControl attribute.

Add

<currency-input></currency-input>

tag for use currency input in your template form.

Currency input form control attributes.

• containerClass – Div container css class.

• controlClass – Css class name for input.

• inputId – Input form field id.

• placeholder – Input placeholder string, if set 0 (nil) placeholder will be shown with two decimals and decimal separator for current locale.

• locale – Current user's locale (Needs for decimal separator (. dot or , comma)). If not defined, will be used app locale.

• positive – True if needs only positive or false if needs positive and negative numbers (false by default).

• prefix – Template prefix before input form control (TemplateRef).

• suffix – Template suffix after input form control (TemplateRef).

• additionalClass – Additional css class for input.

Example usage template part

<form [formGroup]="form">

  <ng-template #currencyInputLabel>
    <label for="currencyInput">Currency input</label><br>
  </ng-template>

  <currency-input
      containerClass="input-group"
      inputId="currencyInput"
      controlClass="currency-input"
      formControlName="currency"
      placeholder="currency test"
      [locale]="locale"
      [positive]="true"
      [prefix]="currencyInputLabel"
      [suffix]="currencyInputError"
      [additionalClass]="form.get('range').hasError('required') ? 'additional-class' : ''">
  </currency-input>

  <ng-template #currencyInputError>
    <div>
      Required
    </div>
  </ng-template>

</form>

Positive integer input form control.

Add form tag in your template with defined form group name.

<form [formGroup]="formGroup">

or use single as single form control with formControl attribute.

Add

<positive-integer-input></positive-integer-input>

tag for use positive integer input in your template form.

Positive integer input form control attributes.

• containerClass – Div container css class.

• controlClass – Css class name for input.

• inputId – Input form field id.

• placeholder – Input placeholder string.

• prefix – Template prefix before input form control (TemplateRef).

• suffix – Template suffix after input form control (TemplateRef).

• additionalClass – Additional css class for input.

• allowLeadingNil – Allows input nil in lead of number (allow by default).

Example usage template part

<form [formGroup]="form">

  <ng-template #positiveIntegerInputLabel>
    <label for="positiveInteger">Positive integer input</label><br>
  </ng-template>

  <positive-integer-input
      containerClass="input-group"
      inputId="positiveIntegerInput"
      controlClass="positive-integer-input"
      formControlName="positiveInteger"
      placeholder="0"
      [allowLeadingNil]="false"
      [prefix]="positiveIntegerInputLabel"
      [suffix]="positiveIntegerInputError"
      [additionalClass]="form.get('positiveInteger').hasError('required') ? 'additional-class' : ''">
  </positive-integer-input>

  <ng-template #positiveIntegerInputError>
    <div>
      Required
    </div>
  </ng-template>

</form>

This project was generated with Angular CLI version 7.0.2.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.