Skip to content

Latest commit

 

History

History
271 lines (209 loc) · 6.73 KB

README.md

File metadata and controls

271 lines (209 loc) · 6.73 KB
Raw

Angular Form Components

npm address: https://www.npmjs.com/package/angular-form-components

Related Versions

Angular Form Components is based on angular(>= 2.0-release).

DatetimepickerComponent is based on these plugins and libs(version):

Select2Component is based on these plugins and libs(version):

How to use

Install

# npm install
npm install angular-form-components --save

# if you have not installed jquery
npm install jquery --save

# if you have not install bootstrap
# to use datetimepicker, you need to import bootstrap css global
npm install bootstrap --save

Import component

// import NgModule
import {NgModule} from '@angular/core';

// import components
import {
    Select2Component,
    RadioWithTextComponent,
    RadioGroupComponent,
    UploadImageComponent,
    UploadFileComponent,
    CheckboxGroupComponent,
    CheckboxWithTextComponent,
    DateTimePickerComponent,
    SelectWithInputComponent,
    OnFocusLostDirective // For SelectWithInputComponent
} from 'angular-form-components';

@NgModule({
  // ...
  // declare components
  declarations: [
    Select2Component,
    RadioWithTextComponent,
    RadioGroupComponent,
    UploadImageComponent,
    UploadFileComponent,
    CheckboxGroupComponent,
    CheckboxWithTextComponent,
    DateTimePickerComponent,
    SelectWithInputComponent,
    OnFocusLostDirective
  ]
})
export class YourModule {
}

Use Component

  1. date-time-picker

Template

<date-time-picker [(ngModel)]="your_prop" accuracy="hour" [startDate]="startDate" [endDate]="endDate" 
  [maxView]="maxView" [minView]="minView" [disabled]="isDisabled" (onChange)="change($event)" ></date-time-picker>

Options

  • accuracy: string
    • accuracy of date-time pick.
    • min(default) | hour | day
  • startDate: string
    • date range: start date
  • endDate: string
    • date range: end date
  • maxView: string
    • maxView: default 4
      • 0 or 'hour' for the hour view （hour view）
      • 1 or 'day' for the day view 0-24h （day view）
      • 2 or 'month' for month view (the default) （month view）
      • 3 or 'year' for the 12-month overview （year view）
      • 4 or 'decade' for the 10-year overview. Useful for date-of-birth datetimepickers.
  • minView: string
  • useTimestamp: boolean
    • if [(ngModel)] use timestamp, default false
  • disabled: boolean
    • isDisabled: default false
  • onSelect
    • callback when datetime selected
  1. select2

Template

<select2 [options]="options" [(ngModel)]="optionSelected" (onSelect)="onSelect($event)"></select2>

Options

  • options: option[]
    • select options for select2
    • option: {id: value, text: key} or string
  • ngModel: option value that is selected(id or string)
  • onSelect
    • callback when option selected
    • parmas: option({id: value, text: key} or string)
  1. checkbox-group

Template

<checkbox-group [(ngModel)]='your_prop' [options]='your_options' [disabled]='your_condition' ></checkbox-group>

Options

  • options: option[]
    • select options for select2
    • option: {id: value, text: key} or string
  • ngModel: option values that is selected(id[] or string[])
  • disabled: boolean
    • isDisabled: default false
  1. checkbox-with-input

Template

<checkbox-with-input [(ngModel)]='your_prop' [options]='your_options' [disabled]='your_condition' ></checkbox-with-input>

Options

  • options: option[]
    • select options for select2
    • option: {id: value, text: key, withInput: boolean(if with input), type: string(text|number)} or string
  • ngModel: option that is selected(option[])
  • disabled: boolean
    • isDisabled: default false
  1. radio-group

Template

<radio-group [(ngModel)]='your_prop' [options]='your_options' [disabled]='your_condition' ></radio-group>

Options

  • options: option[]
    • select options for select2
    • option: {id: value, text: key} or string
  • ngModel: option value that is selected(id or string)
  • disabled: boolean
    • isDisabled: default false
  1. radio-with-input

Template

<radio-with-input [(ngModel)]='your_prop' [options]='your_options' [disabled]='your_condition' ></radio-with-input>

Options

  • options: option[]
    • select options for select2
    • option: {id: value, text: key, withInput: boolean(if with input), type: string(text|number)} or string
  • ngModel: option that is selected(option)
  • disabled: boolean
    • isDisabled: default false
  1. select-with-input

Template

<select-with-input [(ngModel)]='your_prop' [options]='your_options' [disabled]='your_condition' (onSelect)="onSelect($event)"></select-with-input>

Options

  • options: option[]
    • select options for select2
    • option: {id: value, text: key}
  • ngModel: option value that is selected or input value(string)
  • onSelect
    • callback when option selected
    • parmas: option value that is selected or input value(string)
  1. upload-image

Template

<upload-image [(ngModel)]='images_list_array' [limit]='limit_condition' [multiple]='if_multiple' [disabled]='your_condition' [btnName]='btn_name'></upload-image>

Options

  • ngModel: images array(image base64 string[])
  • limit: limit conditions
    • {width, height, size, type}
    • width: image max width(px)
    • height: image max height(px)
    • size: image max size(k)
    • type: image type, accept 'jpeg'/'jpg'/'png'/'gif'
  • multiple: boolean
    • if upload multiple images, default true
  • disabled: boolean
    • isDisabled: default false
  • btnName: string
    • button display name
  1. upload-file

Template

<upload-file [(ngModel)]='your_prop' [multiple]='if_multiple' [limit]='limit_condition' [disabled]='your_condition' [btnName]="btn_name" ></upload-file>

Options

  • ngModel: files array(file base64 string[])
  • limit: limit conditions
    • {size, type}
    • size: file max size(k)
    • type: file type, such as 'txt'
  • multiple: boolean
    • if upload multiple files, default true
  • disabled: boolean
    • isDisabled: default false
  • btnName: string
    • button display name
  • dataType: string
    • file reader data type
    • accept 'DataURL'/'ArrayBuffer'/'BinaryString'/'Text', default 'DataURL'

Use Directive

  1. ngFocusLost

Template

<div ngFocusLost (onFocusLost)="yourFunction()"></div>

Options

  • onFocusLost: EventEmitter
    • callbacks that would execute when element lost focus