ng2-input-forms v1.3.5

Ng2-Input-Forms

Installation

npm install ng2-input-forms

Introduction

An Angular 2 (or above) library for a complete form inputs experience based on Bootstrap v3 styles. It provides input components for Textboxes, Textareas, E-mails, Numbers, Percentuals, Currency, Selects, Radios, Checkboxes and FileUpload.

"On the next Release, NgInputForms will provide a RealTimeSearch Component"

It automatically handles in a clean way input labels, enable/disable, input events and much more...

Besides that, I provided two very useful directives: Debounce and AutoSelectOnFocus.

Code Samples

First of all, any of the following components has a set of common OPTIONAL properties: Label, Disabled and ShowValidations (it tells if the component should show error messages).

Configurations

Ng2InputFormsModule supports the following configurations:

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

import { Ng2InputFormsModule, Ng2InputFormsConfig } from 'ng2-input-forms';

export const ng2InputFormsConfig: Ng2InputFormsConfig = {
  currency: {
    currencyCode: 'USD',
    align: 'right',
    allowNegative: true,
    allowZero: true,
    decimal: '.',
    thousands: ',',
    precision: 2,
    prefix: '',
    suffix: ''
  },
  validationMessages: {
    invalid: '{label} is invalid',
    required: '{label} is required',
    pattern: '{label} is invalid',
    maxlength: 'The filled-in value is greater than the maximum allowed',
    minlength: 'The filled-in value is less than the minimum allowed'
  }
};

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    Ng2InputFormsModule.forRoot(ng2InputFormsConfig)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

input-text

<input-text 
    [label]="'My Label'" 
    [placeholder]="'My placeholder...'" 
    [maxlength]="200" 
    [disabled]="false"   
    [showValidations]="true"
    [(ngModel)]="obj.model" 
    required>
</input-text>

input-textarea

<input-textarea 
    [label]="'My Label'" 
    [placeholder]="'My placeholder...'" 
    [maxlength]="2000" 
    [disabled]="false"   
    [showValidations]="true"
    [(ngModel)]="obj.model" 
    required>
</input-textarea>

input-email

<input-email
    [label]="'My E-mail'" 
    [placeholder]="'My placeholder...'" 
    [maxlength]="200" 
    [disabled]="false"   
    [showValidations]="true"
    [(ngModel)]="obj.model" 
    required>
</input-email>

input-currency

<input-currency 
    [label]="'My Label'" 
    [disabled]="false"   
    [showValidations]="true"
    [(ngModel)]="obj.model" 
    required>
</input-currency>

input-percent

<input-percent
    [label]="'My Label'" 
    [disabled]="false"   
    [showValidations]="true"
    [(ngModel)]="obj.model" 
    required>
</input-percent>

input-number

<input-number
    [label]="'My Label'" 
    [disabled]="false"   
    [maxValue]="100"
    [minValue]="0"
    [showValidations]="true"
    [(ngModel)]="obj.model" 
    required>
</input-number>

input-select

The InputSelect component supports not only a template mode, but an options input too. You can use an array of objects of any types, you just need to customize the displayTextProperty and valueProperty values.

<input-select
    [label]="'My Label'" 
    [defaultOption]="'Select'" 
    [disabled]="false"   
    [showValidations]="true"
    [(ngModel)]="obj.model" 
    [options]="options" //optional
    [displayTextProperty]="'myTextProp'" //default="displayText"
    [valueProperty]="'myValueProp'" //default="value"
    required>
        <option>You can add manual options here as a template</option>
</input-select>

input-checkbox

<input-checkbox 
    [label]="'My checkbox Label'" 
    [disabled]="false"
    [(ngModel)]="obj.model">
</input-checkbox>

input-radio

<input-radio 
    [label]="'My radio 1'" 
    [disabled]="false"
    [name]="'radioOptions'" 
    [radioValue]="1" 
    [(ngModel)]="obj.model">
  </input-radio>
<input-radio 
    [label]="'My radio 2'" 
    [disabled]="false"
    [name]="'radioOptions'" 
    [radioValue]="2" 
    [(ngModel)]="obj.model">
</input-radio>

input-fileupload

<input-fileupload 
    [label]="'My label'" 
    [options]="uploadOptions">
</input-fileupload>

The FileUploadComponent exposes the following configurations:

uploadOptions: any = {
    url: 'http://yourApiUrl',
    selectButtonLabel: 'Select',
    placeHolder: 'Select a file...',
    allowedExtensions: ['.jpg', '.gif', '.png'],
    onSuccessItem: (item: any, response: any, status: any, headers: any) => {
        console.log('Successfully uploaded!');
    },
    onErrorItem: (item: any, response: any, status: any, headers: any) => {
        console.log('Fail :(');
    }
};

For getting the FileUploadComponent component working, you must do only one configuration. If you're using Angular CLI, just add a reference to the 'bootstrap-filestyle.min.js' file localized into the 'dist/assets/js' folder of this library into your '.angular-cli.json' scripts tag.

"scripts": [
    "../node_modules/ng2-input-forms/assets/js/bootstrap-filestyle.min.js"
]