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 installnpm install angular-form-components --save# if you have not installed jquerynpm install jquery --save# if you have not install bootstrap# to use datetimepicker, you need to import bootstrap css globalnpm install bootstrap --save
Import component
// import NgModule;// import components;@
Use Component
- date-time-picker
Template
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.
- maxView: default 4
minView
:string
useTimestamp
:boolean
- if
[(ngModel)]
use timestamp, defaultfalse
- if
disabled
:boolean
- isDisabled: default false
onSelect
- callback when datetime selected
- select2
Template
Options
options
:option[]
- select options for select2
option
:{id: value, text: key}
orstring
ngModel
: option value that is selected(id
orstring
)onSelect
- callback when option selected
- parmas:
option
({id: value, text: key}
orstring
)
- checkbox-group
Template
Options
options
:option[]
- select options for select2
option
:{id: value, text: key}
orstring
ngModel
: option values that is selected(id[]
orstring[]
)disabled
:boolean
- isDisabled: default false
- checkbox-with-input
Template
Options
options
:option[]
- select options for select2
option
:{id: value, text: key, withInput: boolean(if with input), type: string(text|number)}
orstring
ngModel
: option that is selected(option[]
)disabled
:boolean
- isDisabled: default false
- radio-group
Template
Options
options
:option[]
- select options for select2
option
:{id: value, text: key}
orstring
ngModel
: option value that is selected(id
orstring
)disabled
:boolean
- isDisabled: default false
- radio-with-input
Template
Options
options
:option[]
- select options for select2
option
:{id: value, text: key, withInput: boolean(if with input), type: string(text|number)}
orstring
ngModel
: option that is selected(option
)disabled
:boolean
- isDisabled: default false
- select-with-input
Template
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
)
- upload-image
Template
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
- upload-file
Template
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
- ngFocusLost
Template
Options
onFocusLost
:EventEmitter
- callbacks that would execute when element lost focus