https://github.com/uiwebkit/form
Angular 15+ library, that automatically builds and renders highly customizable dynamic forms based on JSON data
https://github.com/uiwebkit/form
angular form json
Last synced: about 1 month ago
JSON representation
Angular 15+ library, that automatically builds and renders highly customizable dynamic forms based on JSON data
- Host: GitHub
- URL: https://github.com/uiwebkit/form
- Owner: uiwebkit
- Created: 2023-01-14T21:12:51.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2024-09-09T15:05:06.000Z (over 1 year ago)
- Last Synced: 2025-09-14T19:59:47.847Z (6 months ago)
- Topics: angular, form, json
- Language: HTML
- Homepage: https://uformng.web.app
- Size: 3.68 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# UniFormNg
UniFormNg is an Angular 15 / 18 library, that automatically builds and renders highly customizable dynamic forms based on JSON data.
License: `MIT`
### Out of the box, you get:
- ready to use well-designed forms (Google's Material design);
- a well-tested and low-coding solution that requires only JSON data;
- dynamic fields based on Angular reactive forms;
- full access to the form object for the easy customization;
- rendering of standard validation errors (required, min, max, ...), which you can simply tweak to your liking;
Check out our docs [here](https://uformng.web.app).
## How to connect?
Run: `npm i uni-form-ng`
Install `"@angular/forms"`, `"@angular/material"` or any other dependencies.
Then you need to add a dependency into your Angular Module:
```
@NgModule({
imports: [
BrowserAnimationsModule,
UniFormComponent,
UniFormFieldComponent, // optional
UniFormGroupComponent, // optional
],
providers: [
provideHttpClient(withFetch()),
{ provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { appearance: 'outline' }} // optional
]
})
```
In main styles file (styles.css) please add:
```
@import "@angular/material/prebuilt-themes/indigo-pink.css";
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
```
## How to use?
### HTML
```
SUBMIT
```
### JSON
```
URL: assets/mocks/group/group.json:
["assets/mocks/dynamic/countries.json","assets/mocks/dynamic/auth.json"]
URL: assets/mocks/dynamic/countries.json:
{"type":"select","key":"countries","label":"Select country / countries","groups":[{"name":"North America","options":[{"label":"Canada","value":"Canada","fields":["assets/mocks/dynamic/canada.json"]},{"label":"USA","value":"USA","fields":["assets/mocks/dynamic/usa.json"]}]}]}
URL: assets/mocks/dynamic/auth.json:
{"type":"checkbox","key":"auth","label":"Check to enable authorization","fields":["assets/mocks/dynamic/login.json","assets/mocks/dynamic/password.json"]}
```
### JS/TS
```
...
export class Component {
form;
handleForm(event) {
this.form = event;
}
onFormSubmit(event) {
console.log(event.value);
}
}
```
[Static fields demo](https://uformng.web.app/static/text)
[Dynamic fields demo](https://uformng.web.app/dynamic/select)
[Custom forms demo](https://uformng.web.app/custom)
## API overview
### Selector: `uni-form-ng`
`@Input() clean: boolean` - by default is false and newly added dynamic fields will not be removed form Angular reactive form object after switch. If true, then newly added dynamic fields will be removed after switch to another fields.
`@Output() formGroupEvent: EventEmitter` - returns a NEW Angular reactive form object every time when a new field was added or removed.
`@Output() submitEvent: EventEmitter` - returns an Angular reactive form object when form is submitted.
### Selector: `uni-form-group-ng`
`@Input() url: string` - the URL link to JSON data with list of fields.
`@Input() nested: UniObject` - the object for nested fields deep configuration.
### Selector: `uni-form-field-ng`
`@Input() url: string` - the URL link to JSON data for building and rendering form field.
`@Input() options: Partial` - the object for the field deep configuration.
`@Input() nested: UniObject` - the object for nested fields deep configuration.