{"id":19009042,"url":"https://github.com/godbasin/angular-form-component","last_synced_at":"2025-04-22T22:47:29.909Z","repository":{"id":57178431,"uuid":"95940399","full_name":"godbasin/angular-form-component","owner":"godbasin","description":"angular form components in angular(\u003e=2.0-release).","archived":false,"fork":false,"pushed_at":"2018-01-13T05:50:03.000Z","size":94,"stargazers_count":3,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-29T19:41:52.207Z","etag":null,"topics":["angular","form","form-components"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/godbasin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-07-01T03:46:58.000Z","updated_at":"2018-03-31T13:35:05.000Z","dependencies_parsed_at":"2022-09-09T19:00:10.974Z","dependency_job_id":null,"html_url":"https://github.com/godbasin/angular-form-component","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/godbasin%2Fangular-form-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/godbasin%2Fangular-form-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/godbasin%2Fangular-form-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/godbasin%2Fangular-form-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/godbasin","download_url":"https://codeload.github.com/godbasin/angular-form-component/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249303565,"owners_count":21247696,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","form","form-components"],"created_at":"2024-11-08T19:06:27.411Z","updated_at":"2025-04-17T02:31:48.774Z","avatar_url":"https://github.com/godbasin.png","language":"TypeScript","readme":"# Angular Form Components\nnpm address: [https://www.npmjs.com/package/angular-form-components](https://www.npmjs.com/package/angular-form-components)\n\n## Related Versions\n\nAngular Form Components is based on [angular(\u003e= 2.0-release)](https://angular.io/).\n\nDatetimepickerComponent is based on these plugins and libs(version):\n- [jQuery](https://jquery.com/)\n- [bootstrap-datetimepicker](http://www.bootcss.com/p/bootstrap-datetimepicker/)\n\nSelect2Component is based on these plugins and libs(version):\n- [jQuery](https://jquery.com/)\n- [select2](https://select2.github.io/)\n\n## How to use\n---\n### Install\n``` cmd\n# npm install\nnpm install angular-form-components --save\n\n# if you have not installed jquery\nnpm install jquery --save\n\n# if you have not install bootstrap\n# to use datetimepicker, you need to import bootstrap css global\nnpm install bootstrap --save\n```\n\n### Import component\n\n``` javascript\n// import NgModule\nimport {NgModule} from '@angular/core';\n\n// import components\nimport {\n    Select2Component,\n    RadioWithTextComponent,\n    RadioGroupComponent,\n    UploadImageComponent,\n    UploadFileComponent,\n    CheckboxGroupComponent,\n    CheckboxWithTextComponent,\n    DateTimePickerComponent,\n    SelectWithInputComponent,\n    OnFocusLostDirective // For SelectWithInputComponent\n} from 'angular-form-components';\n\n@NgModule({\n  // ...\n  // declare components\n  declarations: [\n    Select2Component,\n    RadioWithTextComponent,\n    RadioGroupComponent,\n    UploadImageComponent,\n    UploadFileComponent,\n    CheckboxGroupComponent,\n    CheckboxWithTextComponent,\n    DateTimePickerComponent,\n    SelectWithInputComponent,\n    OnFocusLostDirective\n  ]\n})\nexport class YourModule {\n}\n```\n\n### Use Component\n1. date-time-picker\n\n**Template**\n\n``` html\n\u003cdate-time-picker [(ngModel)]=\"your_prop\" accuracy=\"hour\" [startDate]=\"startDate\" [endDate]=\"endDate\" \n  [maxView]=\"maxView\" [minView]=\"minView\" [disabled]=\"isDisabled\" (onChange)=\"change($event)\" \u003e\u003c/date-time-picker\u003e\n```\n\n**Options**\n\n- `accuracy`: `string`\n  - accuracy of date-time pick. \n  - min(default) | hour | day\n- `startDate`: `string`\n  - date range: start date\n- `endDate`: `string`\n  - date range: end date\n- `maxView`: `string`\n  - maxView: default 4\n    - 0 or 'hour' for the hour view （hour view）\n    - 1 or 'day' for the day view 0-24h （day view）\n    - 2 or 'month' for month view (the default) （month view）\n    - 3 or 'year' for the 12-month overview （year view）\n    - 4 or 'decade' for the 10-year overview. Useful for date-of-birth datetimepickers.\n- `minView`: `string`\n- `useTimestamp`: `boolean`\n  - if `[(ngModel)]` use timestamp, default `false`\n- `disabled`: `boolean`\n  - isDisabled: default false\n- `onSelect`\n  - callback when datetime selected\n\n2. select2\n\n**Template**\n\n``` html\n\u003cselect2 [options]=\"options\" [(ngModel)]=\"optionSelected\" (onSelect)=\"onSelect($event)\"\u003e\u003c/select2\u003e\n```\n\n**Options**\n\n- `options`: `option[]`\n  - select options for select2\n  - `option`: `{id: value, text: key}` or `string`\n- `ngModel`: option value that is selected(`id` or `string`)\n- `onSelect`\n  - callback when option selected\n  - parmas: `option`(`{id: value, text: key}` or `string`)\n\n3. checkbox-group\n\n**Template**\n\n``` html\n\u003ccheckbox-group [(ngModel)]='your_prop' [options]='your_options' [disabled]='your_condition' \u003e\u003c/checkbox-group\u003e\n```\n\n**Options**\n\n- `options`: `option[]`\n  - select options for select2\n  - `option`: `{id: value, text: key}` or `string`\n- `ngModel`: option values that is selected(`id[]` or `string[]`)\n- `disabled`: `boolean`\n  - isDisabled: default false\n\n4. checkbox-with-input\n\n**Template**\n\n``` html\n\u003ccheckbox-with-input [(ngModel)]='your_prop' [options]='your_options' [disabled]='your_condition' \u003e\u003c/checkbox-with-input\u003e\n```\n\n**Options**\n\n- `options`: `option[]`\n  - select options for select2\n  - `option`: `{id: value, text: key, withInput: boolean(if with input), type: string(text|number)}` or `string`\n- `ngModel`: option that is selected(`option[]`)\n- `disabled`: `boolean`\n  - isDisabled: default false\n\n4. radio-group\n\n**Template**\n\n``` html\n\u003cradio-group [(ngModel)]='your_prop' [options]='your_options' [disabled]='your_condition' \u003e\u003c/radio-group\u003e\n```\n\n**Options**\n\n- `options`: `option[]`\n  - select options for select2\n  - `option`: `{id: value, text: key}` or `string`\n- `ngModel`: option value that is selected(`id` or `string`)\n- `disabled`: `boolean`\n  - isDisabled: default false\n\n5. radio-with-input\n\n**Template**\n\n``` html\n\u003cradio-with-input [(ngModel)]='your_prop' [options]='your_options' [disabled]='your_condition' \u003e\u003c/radio-with-input\u003e\n```\n\n**Options**\n\n- `options`: `option[]`\n  - select options for select2\n  - `option`: `{id: value, text: key, withInput: boolean(if with input), type: string(text|number)}` or `string`\n- `ngModel`: option that is selected(`option`)\n- `disabled`: `boolean`\n  - isDisabled: default false\n\n6. select-with-input\n\n**Template**\n\n``` html\n\u003cselect-with-input [(ngModel)]='your_prop' [options]='your_options' [disabled]='your_condition' (onSelect)=\"onSelect($event)\"\u003e\u003c/select-with-input\u003e\n```\n\n**Options**\n\n- `options`: `option[]`\n  - select options for select2\n  - `option`: `{id: value, text: key}`\n- `ngModel`: option value that is selected or input value(`string`)\n- `onSelect`\n  - callback when option selected\n  - parmas: option value that is selected or input value(`string`)\n\n7. upload-image\n\n**Template**\n\n``` html\n\u003cupload-image [(ngModel)]='images_list_array' [limit]='limit_condition' [multiple]='if_multiple' [disabled]='your_condition' [btnName]='btn_name'\u003e\u003c/upload-image\u003e\n```\n\n**Options**\n\n- `ngModel`: images array(`image base64 string[]`)\n- `limit`: limit conditions\n  - `{width, height, size, type}`\n  - `width`: image max width(px)\n  - `height`: image max height(px)\n  - `size`: image max size(k)\n  - `type`: image type, accept 'jpeg'/'jpg'/'png'/'gif'\n- `multiple`: `boolean`\n  - if upload multiple images, default true\n- `disabled`: `boolean`\n  - isDisabled: default false\n- `btnName`: string\n  - button display name\n\n8. upload-file\n\n**Template**\n\n``` html\n\u003cupload-file [(ngModel)]='your_prop' [multiple]='if_multiple' [limit]='limit_condition' [disabled]='your_condition' [btnName]=\"btn_name\" \u003e\u003c/upload-file\u003e\n```\n\n**Options**\n\n- `ngModel`: files array(`file base64 string[]`)\n- `limit`: limit conditions\n  - `{size, type}`\n  - `size`: file max size(k)\n  - `type`: file type, such as 'txt'\n- `multiple`: `boolean`\n  - if upload multiple files, default true\n- `disabled`: `boolean`\n  - isDisabled: default false\n- `btnName`: string\n  - button display name\n- `dataType`: string\n  - file reader data type\n  - accept 'DataURL'/'ArrayBuffer'/'BinaryString'/'Text', default 'DataURL'\n\n### Use Directive\n\n1. ngFocusLost\n\n**Template**\n\n``` html\n\u003cdiv ngFocusLost (onFocusLost)=\"yourFunction()\"\u003e\u003c/div\u003e\n```\n\n**Options**\n\n- `onFocusLost`: `EventEmitter`\n  - callbacks that would execute when element lost focus\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgodbasin%2Fangular-form-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgodbasin%2Fangular-form-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgodbasin%2Fangular-form-component/lists"}