angular form components in angular(>=2.0-release).
npm address: https://www.npmjs.com/package/angular-form-components
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):
# 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 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 {
}
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
startDate
: string
endDate
: string
maxView
: string
minView
: string
useTimestamp
: boolean
[(ngModel)]
use timestamp, default false
disabled
: boolean
onSelect
Template
<select2 [options]="options" [(ngModel)]="optionSelected" (onSelect)="onSelect($event)"></select2>
Options
options
: option[]
option
: {id: value, text: key}
or string
ngModel
: option value that is selected(id
or string
)onSelect
option
({id: value, text: key}
or string
)Template
<checkbox-group [(ngModel)]='your_prop' [options]='your_options' [disabled]='your_condition' ></checkbox-group>
Options
options
: option[]
option
: {id: value, text: key}
or string
ngModel
: option values that is selected(id[]
or string[]
)disabled
: boolean
Template
<checkbox-with-input [(ngModel)]='your_prop' [options]='your_options' [disabled]='your_condition' ></checkbox-with-input>
Options
options
: option[]
option
: {id: value, text: key, withInput: boolean(if with input), type: string(text|number)}
or string
ngModel
: option that is selected(option[]
)disabled
: boolean
Template
<radio-group [(ngModel)]='your_prop' [options]='your_options' [disabled]='your_condition' ></radio-group>
Options
options
: option[]
option
: {id: value, text: key}
or string
ngModel
: option value that is selected(id
or string
)disabled
: boolean
Template
<radio-with-input [(ngModel)]='your_prop' [options]='your_options' [disabled]='your_condition' ></radio-with-input>
Options
options
: option[]
option
: {id: value, text: key, withInput: boolean(if with input), type: string(text|number)}
or string
ngModel
: option that is selected(option
)disabled
: boolean
Template
<select-with-input [(ngModel)]='your_prop' [options]='your_options' [disabled]='your_condition' (onSelect)="onSelect($event)"></select-with-input>
Options
options
: option[]
option
: {id: value, text: key}
ngModel
: option value that is selected or input value(string
)onSelect
string
)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
disabled
: boolean
btnName
: stringTemplate
<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
disabled
: boolean
btnName
: stringdataType
: stringTemplate
<div ngFocusLost (onFocusLost)="yourFunction()"></div>
Options
onFocusLost
: EventEmitter