Controls-library NPM

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.