{"id":21518681,"url":"https://github.com/halo-lab/angular-getform","last_synced_at":"2025-03-17T16:45:15.592Z","repository":{"id":101402069,"uuid":"607082167","full_name":"Halo-Lab/angular-getform","owner":"Halo-Lab","description":null,"archived":false,"fork":false,"pushed_at":"2023-04-20T10:26:06.000Z","size":779,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-11T02:02:54.228Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Halo-Lab.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-02-27T09:20:52.000Z","updated_at":"2023-03-05T11:17:02.000Z","dependencies_parsed_at":"2023-07-07T19:01:45.099Z","dependency_job_id":null,"html_url":"https://github.com/Halo-Lab/angular-getform","commit_stats":{"total_commits":2,"total_committers":1,"mean_commits":2.0,"dds":0.0,"last_synced_commit":"e071f4c83b618f9f1cfca49bdf6210699e7a2c8f"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Halo-Lab%2Fangular-getform","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Halo-Lab%2Fangular-getform/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Halo-Lab%2Fangular-getform/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Halo-Lab%2Fangular-getform/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Halo-Lab","download_url":"https://codeload.github.com/Halo-Lab/angular-getform/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244073316,"owners_count":20393785,"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":[],"created_at":"2024-11-24T00:53:31.892Z","updated_at":"2025-03-17T16:45:15.561Z","avatar_url":"https://github.com/Halo-Lab.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"#### To start project locally you need to run :\n\n```sh\n1) npm i\n2) ng serve\n```\n#### If you want to add some changes to ng-getfrom and see latest version you must run command :\n\n```sh\nng build @halo-lab/ng-getform --watch\n```\n#### If you need to create production build of `@halo-lab/ng-getform` you must run :\n```sh\nng build @halo-lab/ng-getform --configuration=production\n```\n# @halo-lab/ng-getform\n\n### To install package\n\n```sh\nnpm install @halo-lab/ng-getform\n```\n\n### To use the components\n\n```sh\nimport { NgGetform, Input , Button, Checkbox, Select, RadioGroup } from '@halo-lab/ng-getform';\n\n```\n- add imported component to imports in your component\n\n```sh\n  imports: [ NgGetForm, Input, Button, Checkbox, Select, RadioGroup]\n```\n\n### Button accepts parameters\n\n| Property | Type  | Necessity | Description |\n| :-- | :-- | :-- | :----- |\n| btnLabel| `string` | required | Text inside button |\n| btnType | `string` | optional | Type of button ('filled' or 'stroke'). Also can be 'wide' ( width : 100%). Default value - 'filled' |\n| className | `string` |  optional | Class name for custom styling|\n\nYou can add events listeners directly on `\u003clib-button\u003e` component.\n\n### Input accepts parameters\n\n| Property | Type  | Necessity | Description |\n| :-- | :-- | :-- | :----- |\n| control | [`FormControl`](https://angular.io/api/forms/FormControl)  | required  | Variable which control input value (new FormControl(yourValue : string)). Actually you can use all methods that are avalilable with [Angular FormControl](https://angular.io/api/forms/FormControl) |\n| inputId | `string or number` | required |  Unique ID of an input field |\n| label| `string` | optional | The label of an input|\n| placeholder | `string` | optional | Input placeholder (by default equal to `label`)|\n| validator | `{type: string, message: string, value?: string or number}[]` | optional | Array of objects in the form of {type: validation type , message: text for unvalid tooltip, value?: for max, min, maxLength, minLength, pattern validators}. Validator's types may be: `required`, `email` , `number` , `maxLength`, `minLength`, `max`, `min`, `pattern`. For example: `[ { type: 'required', message: 'Required field' },{ type: 'minLength', message: 'At least 2 characters', value: 2 },{ type: 'pattern', message: 'Only letters', value: '[a-zA-Z]+' }]`|\n| multiRows| ` boolean` | optional | When equal true, will be rendered `\u003ctextarea\u003e`, otherwise a `\u003cinput\u003e`|\n| type | `string` | optional |  Input type (default 'text')|\n| className | `string` | optional | Class name for custom styling|\n\n\n### Checkbox accepts parameters\n\n| Property | Type  | Necessity | Description |\n| :-- | :-- | :-- | :----- |\n| name | `string`| required |  The name of an checkbox field |\n| label |`string`  | required | The label of an checkbox|\n| control | [`FormControl`](https://angular.io/api/forms/FormControl)   | required | Variable which control checkbox value (new FormControl(yourValue : boolean)). Actually you can use all methods that are avalilable with [Angular FormControl](https://angular.io/api/forms/FormControl). |\n| validator |`{type: string, message: string, value?: string or number}[]`  | optional | Array of objects in the form of {type: validation type , message: text for unvalid tooltip, value?: string or number}. The validator's name may be: `requiredTrue`. For example: `[{name: \"requiredTrue\", message: \"Please accept our terms\"}]`.|\n| className | `string` | optional | Class name for custom styling|\n\n### RadioGroup accepts parameters\n\n| Property | Type  | Necessity | Description |\n| :-- | :-- | :-- | :----- |\n| name | `string`| required | The name of an radio group input |\n| label |`string` | required | he label of an radio group|\n| items | `{name:string,value:string}[]` | required | Array of options  |\n| required | [`FormControl`](https://angular.io/api/forms/FormControl)   | required | Variable which control radio group value (new FormControl(yourValue : string or number)). Actually you can use all methods that are avalilable with [Angular FormControl](https://angular.io/api/forms/FormControl). |\n| validator |`{type: string, message: string, value?: string or number}[]` | optional | Array of objects in the form of {type: validation type , message: text for unvalid tooltip, value?: string or number}. The validator's name may be: `required`. For example: `[{name: \"required\", message: \"You must select one option\"}]`.|\n| orientation |`string (vertical or horizontal)` |  optional | Property that allow you to control buttons group orientation. Default value : vertical|\n| className | `string` | optional | Class name for custom styling|\n\n### Select accepts parameters\n\n| Property | Type  | Necessity | Description |\n| :-- | :-- | :-- | :----- |\n| placeholder| `string`| required | Question before select component |\n| options | `string[]` | required | Array of options|\n| control | [`FormControl`](https://angular.io/api/forms/FormControl)   | required | Variable which control radio group value (new FormControl(yourValue : string)). Actually you can use all methods that are avalilable with [Angular FormControl](https://angular.io/api/forms/FormControl). |\n| validator |`{type: string, message: string, value?: string or number}[]` | optional | Array of objects in the form of {type: validation type , message: text for unvalid tooltip, value?: string or number}. The validator's name may be: `required`. For example: `[{name: \"required\", message: \"Please select your favourite fruit\"}]`.|\n| searchEnabled | `boolean` | optional |  Enable/disable search bar for select options|\n| className | `string` | optional | Class name for custom styling|\n\n### NgGetform accepts parameters\n| Property | Type  | Necessity | Description |\n| :-- | :-- | :-- | :----- |\n| targetUrl | `string`| required | The url of your endpoint on getform |\n| formGroup |[`FormGroup`](https://angular.io/api/forms/FormGroup) | required | A [FormGroup](https://angular.io/api/forms/FormGroup) aggregates the values of each child FormControl into one object, with each control name as the key. It calculates its status by reducing the status values of its children.|\n| successCallback | `Function` | optional |  Function that will be called after successful submission of the form data on getform.io|\n| className | `string` | optional | Class name for custom form styling|\n\n### Example of usage\n#### HTML \n```sh\n  \u003clib-ng-getform\n    [targetUrl]=\"'https://getform.io/your-getform-id'\"\n    [formGroup]=\"formGroup\"\n    [successCallback]=\"callback\"\n  \u003e\n    \u003clib-input\n      [label]=\"'Name'\"\n      [placeholder]=\"'Please write your name'\"\n      [control]=\"formGroup.controls['name']\"\n      [validator]=\"[\n        { type: 'required', message: 'Required field' },\n        { type: 'minLength', message: 'At least 2 characters', value: 2 },\n        { type: 'pattern', message: 'Only letters', value: '[a-zA-Z]+' }\n      ]\"\n    \u003e\u003c/lib-input\u003e\n    \u003clib-input\n      [label]=\"'E-mail'\"\n      [placeholder]=\"'Please write your email'\"\n      [control]=\"formGroup.controls['email']\"\n      [validator]=\"[\n        { type: 'required', message: 'Required field' },\n        { type: 'email', message: 'Unvalid e-mail' }\n      ]\"\n    \u003e\u003c/lib-input\u003e\n    \u003clib-radio-group\n      [label]=\"'Choose your favourite sport'\"\n      [orientation]=\"'vertical'\"\n      [items]=\"sportsOptions\"\n      [control]=\"formGroup.controls['sport']\"\n      [validator]=\"[\n        { type: 'required', message: 'You need to select option!' }\n      ]\"\n    \u003e\u003c/lib-radio-group\u003e\n    \u003clib-select\n      [placeholder]=\"'Choose your favourite fruit'\"\n      [searchEnabled]=\"true\"\n      [options]=\"fruitsArr\"\n      [control]=\"formGroup.controls['fruit']\"\n      [validator]=\"[{ type: 'required', message: 'Select one fruit!' }]\"\n    \u003e\u003c/lib-select\u003e\n    \u003clib-checkbox\n      [name]=\"'confirmation'\"\n      [label]=\"'Are you sure about that?'\"\n      [control]=\"formGroup.controls['confirmation']\"\n      [validator]=\"[{ type: 'requiredTrue', message: 'Must be checked' }]\"\n    \u003e\u003c/lib-checkbox\u003e\n    \u003clib-button [btnLabel]=\"'Send Form'\" [btnType]=\"'wide filled'\"\u003e\u003c/lib-button\u003e\n  \u003c/lib-ng-getform\u003e\n```\n#### TS\n```sh\nimport { FormControl, FormGroup } from '@angular/forms';\nimport { NgGetform, Input , Button, Checkbox, Select, RadioGroup } from '@halo-lab/ng-getform'\n\nformGroup: FormGroup = new FormGroup({\n    name: new FormControl(''),\n    email: new FormControl(''),\n    fruit: new FormControl(null),\n    sport: new FormControl(null),\n    confirmation: new FormControl(false)\n  })\n\n  sportsOptions: { name: string, value: string }[] =\n    [{ name: 'soccer', value: 'soccer' },\n    { name: 'hockey', value: 'hockey' },\n    { name: 'tenis', value: 'tenis' },\n    { name: 'basketball', value: 'basketball' },\n    { name: 'formula 1', value: 'formula-1' }];\n  fruitsArr: string[] = ['Banana',\n    'Mango',\n    'Pear',\n    'Apple',\n    'Orange'\n  ];\n\n  callback() {\n    console.log('hello from callback');\n  }\n\n```\n\n## Word from author\n\nHave fun ✌️\n\n\u003ca href=\"https://www.halo-lab.com/?utm_source=github\"\u003e\n  \u003cimg\n    src=\"https://dgestran.sirv.com/Images/supported-by-halolab.png\"\n    alt=\"Supported by Halo lab\"\n    height=\"60\"\n  \u003e\n\u003c/a\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhalo-lab%2Fangular-getform","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhalo-lab%2Fangular-getform","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhalo-lab%2Fangular-getform/lists"}