https://github.com/godbasin/angular-form-component
angular form components in angular(>=2.0-release).
https://github.com/godbasin/angular-form-component
angular form form-components
Last synced: 12 months ago
JSON representation
angular form components in angular(>=2.0-release).
- Host: GitHub
- URL: https://github.com/godbasin/angular-form-component
- Owner: godbasin
- License: mit
- Created: 2017-07-01T03:46:58.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2018-01-13T05:50:03.000Z (about 8 years ago)
- Last Synced: 2025-03-29T19:41:52.207Z (about 1 year ago)
- Topics: angular, form, form-components
- Language: TypeScript
- Homepage:
- Size: 91.8 KB
- Stars: 3
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Angular Form Components
npm address: [https://www.npmjs.com/package/angular-form-components](https://www.npmjs.com/package/angular-form-components)
## Related Versions
Angular Form Components is based on [angular(>= 2.0-release)](https://angular.io/).
DatetimepickerComponent is based on these plugins and libs(version):
- [jQuery](https://jquery.com/)
- [bootstrap-datetimepicker](http://www.bootcss.com/p/bootstrap-datetimepicker/)
Select2Component is based on these plugins and libs(version):
- [jQuery](https://jquery.com/)
- [select2](https://select2.github.io/)
## How to use
---
### Install
``` cmd
# 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
``` javascript
// 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**
``` html
```
**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
2. select2
**Template**
``` html
```
**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`)
3. checkbox-group
**Template**
``` html
```
**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
4. checkbox-with-input
**Template**
``` html
```
**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
4. radio-group
**Template**
``` html
```
**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
5. radio-with-input
**Template**
``` html
```
**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
6. select-with-input
**Template**
``` html
```
**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`)
7. upload-image
**Template**
``` html
```
**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
8. upload-file
**Template**
``` html
```
**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**
``` html
```
**Options**
- `onFocusLost`: `EventEmitter`
- callbacks that would execute when element lost focus