{"id":13808519,"url":"https://github.com/formio/angular","last_synced_at":"2025-05-14T17:09:19.264Z","repository":{"id":37089700,"uuid":"62513582","full_name":"formio/angular","owner":"formio","description":"JSON powered forms for Angular","archived":false,"fork":false,"pushed_at":"2025-05-07T18:06:40.000Z","size":17882,"stargazers_count":678,"open_issues_count":50,"forks_count":486,"subscribers_count":57,"default_branch":"master","last_synced_at":"2025-05-07T19:23:05.531Z","etag":null,"topics":["angular","forms","json-schema","serverless"],"latest_commit_sha":null,"homepage":"https://formio.github.io/angular-demo","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/formio.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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,"zenodo":null}},"created_at":"2016-07-03T20:15:38.000Z","updated_at":"2025-05-07T18:06:45.000Z","dependencies_parsed_at":"2023-02-10T16:15:58.948Z","dependency_job_id":"b54a26a3-146a-4e44-955c-30be58cf57a2","html_url":"https://github.com/formio/angular","commit_stats":{"total_commits":831,"total_committers":65,"mean_commits":"12.784615384615385","dds":"0.47172081829121537","last_synced_commit":"1e1fa61400db9b9aeed51e4df50cc2e4a8ed3f8a"},"previous_names":["formio/angular-formio","formio/ng2-formio"],"tags_count":451,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/formio%2Fangular","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/formio%2Fangular/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/formio%2Fangular/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/formio%2Fangular/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/formio","download_url":"https://codeload.github.com/formio/angular/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253730192,"owners_count":21954785,"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","forms","json-schema","serverless"],"created_at":"2024-08-04T01:01:45.062Z","updated_at":"2025-05-14T17:09:19.255Z","avatar_url":"https://github.com/formio.png","language":"TypeScript","readme":"Form.io Angular JSON Form Renderer\n==========================\nThis library serves as a Dynamic JSON Powered Form rendering library for [Angular](https://angular.io). This works by\nproviding a JSON schema to a ```\u003cformio\u003e``` Angular component, where that form is dynamically rendered within the front\nend application. This allows forms to be dynamically built using JSON schemas.\n\nAngular Versions\n-------------------------\nThis library supports many different Angular Versions. If you wish to use this library with your specific version of Angular, then you will need to install the following versions.\n\n\n*Angular Compatibility*\n| **@formio/angular** | **Angular Version** | **formiojs*** |\n|---------------------|---------------------|--------------|\n| 6.0.0               | 16                  | 4.x          |\n| 6.5.0               | 16                  | 5.x          |\n| 7.0.0               | 17                  | 4.x          |\n| 7.5.0               | 17                  | 5.x          |\n| 8.0.0               | 18                  | 5.x          |\n| 9.0.0               | 19                  | 5.x          |\n\n_*Note: The formiojs namespace changes from formiojs (4.x) to @formio/js (5.x)_\n\n## Angular 17\nAngular 17 versions are currently released as \"latest\" so you can install with Angular 17 with the following commands.\n\n### NPM\n    npm install --save @formio/angular\n\n### Yarn\n    yarn add --save @formio/angular\n\n## Angular 16\n### NPM\n    npm install --save @formio/angular@a16\n\n### Yarn\n    yarn add --save @formio/angular@a16\n\nRunning Demo\n--------------------------\nTo run a demo of the Form.io Angular renderer, please follow these steps.\n \n 1. Make sure you have the [Angular CLI](https://angular.io) installed on your machine.\n 2. Download the [Angular Demo Application](https://github.com/formio/angular-demo) to your computer.\n 3. With your terminal, type ```npm install```\n 4. Now type ```ng serve```\n \nThis will startup an example application where you can see all the features provided by this module.\n\nHere is the hosted demo application [https://formio.github.io/angular-demo/](https://formio.github.io/angular-demo)\n\n### Note: If you wish to see the Angular Demo for Angular 16, then use the 6.0.x branch of this repo.\n\nUsing within your application\n---------------------------\nYou can easily render a form within your Angular application by referencing the URL of that form as follows.\n\n```html\n\u003cformio src='https://examples.form.io/example'\u003e\u003c/formio\u003e\n```\n\nYou can also pass the JSON form directly to the renderer as follows.\n\n```html\n\u003cformio [form]='{\n    \"title\": \"My Test Form\",\n    \"components\": [\n        {\n            \"type\": \"textfield\",\n            \"input\": true,\n            \"tableView\": true,\n            \"inputType\": \"text\",\n            \"inputMask\": \"\",\n            \"label\": \"First Name\",\n            \"key\": \"firstName\",\n            \"placeholder\": \"Enter your first name\",\n            \"prefix\": \"\",\n            \"suffix\": \"\",\n            \"multiple\": false,\n            \"defaultValue\": \"\",\n            \"protected\": false,\n            \"unique\": false,\n            \"persistent\": true,\n            \"validate\": {\n                \"required\": true,\n                \"minLength\": 2,\n                \"maxLength\": 10,\n                \"pattern\": \"\",\n                \"custom\": \"\",\n                \"customPrivate\": false\n            },\n            \"conditional\": {\n                \"show\": \"\",\n                \"when\": null,\n                \"eq\": \"\"\n            }\n        },\n        {\n            \"type\": \"textfield\",\n            \"input\": true,\n            \"tableView\": true,\n            \"inputType\": \"text\",\n            \"inputMask\": \"\",\n            \"label\": \"Last Name\",\n            \"key\": \"lastName\",\n            \"placeholder\": \"Enter your last name\",\n            \"prefix\": \"\",\n            \"suffix\": \"\",\n            \"multiple\": false,\n            \"defaultValue\": \"\",\n            \"protected\": false,\n            \"unique\": false,\n            \"persistent\": true,\n            \"validate\": {\n                \"required\": true,\n                \"minLength\": 2,\n                \"maxLength\": 10,\n                \"pattern\": \"\",\n                \"custom\": \"\",\n                \"customPrivate\": false\n            },\n            \"conditional\": {\n                \"show\": \"\",\n                \"when\": null,\n                \"eq\": \"\"\n            }\n        },\n        {\n            \"input\": true,\n            \"label\": \"Submit\",\n            \"tableView\": false,\n            \"key\": \"submit\",\n            \"size\": \"md\",\n            \"leftIcon\": \"\",\n            \"rightIcon\": \"\",\n            \"block\": false,\n            \"action\": \"submit\",\n            \"disableOnInvalid\": true,\n            \"theme\": \"primary\",\n            \"type\": \"button\"\n        }\n    ]\n}'\u003e\u003c/formio\u003e\n```\n\nThis is a very simple example. This library is capable of building very complex forms which include e-signatures, columns,\npanels, field conditionals, validation requirements, and the list goes on and on.\n\nUsage\n----------------\nTo use this library within your project, you will first need to install it as a dependency.\n\n```\nnpm install --save @formio/angular@rc @formio/js\n```\n\nYou can now include the module in your Angular application like so.\n\n```js\nimport { FormioModule } from '@formio/angular';\n@NgModule({\n    imports: [ BrowserModule, CommonModule, FormioModule ],\n    declarations: [ AppComponent ],\n    bootstrap: [ AppComponent ]\n})\nexport class AppModule { }\n```\n\nBootstrap Versions\n-----------------\nBy default, this library will use Bootstrap 5 as the template and rendering CSS framework. This, however, can be changed by adding different templates into your application and using them like the following.\n\n```\nnpm install --save @formio/bootstrap@rc\n```\n\nThen perform the following in your application.\n\n```\nimport { Formio } from '@formio/angular';\nimport bootstrap4 from '@formio/bootstrap/bootstrap4';\n(Formio as any).use(bootstrap4);\n```\n\nIncluded Libraries\n-----------------\nThis library is a combination of multiple libraries that enable rapid Serverless application development using Form.io. These libraries are as follows.\n\n1. [Form Renderer](https://github.com/formio/angular-formio/wiki/Form-Renderer) - The form renderer in Angular\n2. [Form Builder](https://github.com/formio/angular-formio/wiki/Form-Builder) - The form builder in Angular\n3. [Form Manager](https://github.com/formio/angular-formio/wiki/Form-Mananger) - The form management application used to manage forms.\n4. [Authentication](https://github.com/formio/angular-formio/wiki/User-Authentication) - Allows an easy way to provide Form.io authentication into your application.\n5. [Resource](https://github.com/formio/angular-formio/wiki/Resource-Management) - A way to include the Resources within your application with full CRUDI support (Create, Read, Update, Delete, Index)\n6. [Data Table (Grid)](https://github.com/formio/angular-formio/wiki/Data-Table) - A way to render data within a Table format, which includes pagination, sorting, etc.\n\nClick on each of those links to read more about how they work and how to utilize them to their fullest potential.\n\nDemo Application\n----------\nIf you would like to run a demonstration of all the features of this module, then you can check out the [Angular Demo Application](https://github.com/formio/angular-demo), which is the code behind the following hosted application @ [https://formio.github.io/angular-demo](https://formio.github.io/angular-demo)\n\nApplication Starter Kit\n----------\nFor help in getting started using this library, we created the [angular-app-starterkit](https://github.com/formio/angular-app-starterkit) repository to help you get started with best practices with using Form.io within an Angular application. You can try this applicatoin by downloading that application and then doing the following.\n\n```\nnpm install\nnpm start\n```\n\nFull Documentation\n------------------\nTo read up on the full documentation of this library, please check out the [Wiki Page](https://github.com/formio/angular-formio/wiki)\n\nAbout Form.io\n-----------------\n\u003ca href=\"https://form.io\" target=\"_blank\"\u003eForm.io\u003c/a\u003e is a combined form and data management API platform created for developers who are building \"Serverless\" form-based applications.  Form.io provides an easy drag-and-drop form builder workflow allowing you to build complex forms for enterprise applications quickly and easily. These forms are then embedded directly into your application with a single line of code that dynamically renders the form (using Angular or React) in your app while at the very same time generating the RESTful API to support those forms. The Form.io platform also offers numerous 3rd-party services that are fully integrated into the form building process allowing you to extend the power and capability of your apps while saving time and effort.\n\nYou can use this renderer with Form.io by simply pointing the ```src``` parameter to the URL of the form. For example, the following URL points to the JSON schema of a form built on Form.io.\n\n  https://pjmfogrfqptslvi.form.io/test\n  \nTo render this form, you simply provide that URL to the ```\u003cformio\u003e``` directive like so.\n\n```\u003cformio src=\"https://pjmfogrfqptslvi.form.io/test\"\u003e\u003c/formio\u003e```\n\nNot only will this render the form, but it will also submit that form to the provided API endpoint.\n","funding_links":[],"categories":["Third Party Components"],"sub_categories":["JSON Forms"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fformio%2Fangular","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fformio%2Fangular","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fformio%2Fangular/lists"}