Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/andrewjbateman/ionic-api-techdata
:clipboard: Displays a reactive form with controls defined in a JSON file. Code from Josh Morony.
https://github.com/andrewjbateman/ionic-api-techdata
angular angular15 capacitor html5 ionic ionic6 json-data reactive-forms scss-framework
Last synced: about 2 months ago
JSON representation
:clipboard: Displays a reactive form with controls defined in a JSON file. Code from Josh Morony.
- Host: GitHub
- URL: https://github.com/andrewjbateman/ionic-api-techdata
- Owner: AndrewJBateman
- Created: 2018-12-20T12:47:17.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-02-23T16:58:54.000Z (almost 2 years ago)
- Last Synced: 2023-03-02T09:37:21.473Z (almost 2 years ago)
- Topics: angular, angular15, capacitor, html5, ionic, ionic6, json-data, reactive-forms, scss-framework
- Language: TypeScript
- Homepage:
- Size: 2.16 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# :zap: Ionic API TechData
* Displays a reactive form with controls defined in a JSON file
* Code from [Joshua Morony](https://www.youtube.com/channel/UCbVZdLngJH6KOJvpAOO3qTw) - see [:clap: Inspiration](#clap-inspiration) below
* **Note:** to open web links in a new window use: _ctrl+click on link_
## :page_facing_up: Table of contents
* [:zap: Ionic API TechData](#zap-ionic-api-techdata)
* [:page\_facing\_up: Table of contents](#page_facing_up-table-of-contents)
* [:books: General info](#books-general-info)
* [:camera: Screenshots](#camera-screenshots)
* [:signal\_strength: Technologies](#signal_strength-technologies)
* [:floppy\_disk: Setup](#floppy_disk-setup)
* [:computer: Code Examples](#computer-code-examples)
* [:cool: Features](#cool-features)
* [:clipboard: Status \& To-do list](#clipboard-status--to-do-list)
* [:clap: Inspiration](#clap-inspiration)
* [:file\_folder: License](#file_folder-license)
* [:envelope: Contact](#envelope-contact)
## :books: General info
* [Angular ChangeDetectionStrategy](https://angular.io/api/core/ChangeDetectionStrategy) set to OnPush, so automatic change detection set to off.
## :camera: Screenshots
## :signal_strength: Technologies
* [Ionic/angular v7](https://ionicframework.com/)
* [Ionic v7](https://ionicframework.com/)
* [Angular v16](https://angular.io/)
* [Reactive Forms](https://angular.io/guide/reactive-forms) model-driven approach to handling form inputs whose values change over time.
* [Transform.Tools](https://transform.tools/) online data format conversion
## :floppy_disk: Setup
* Load dependencies using `npm i`,
* To start the server on _localhost://8100_ type: 'ionic serve'
## :computer: Code Examples
* `json-form.component.ts` method to create a form from the `data-form.json` values
```typescript
createForm(controls: IJsonFormControls[]) {
for (const control of controls) {
const validatorsToAdd = [];
for (const [key, value] of Object.entries(control.validators)) {
switch (key) {
case 'min':
validatorsToAdd.push(Validators.min(value));
break;
case 'max':
validatorsToAdd.push(Validators.max(value));
break;
case 'required':
if (value) {
validatorsToAdd.push(Validators.required);
}
break;
case 'requiredTrue':
if (value) {
validatorsToAdd.push(Validators.requiredTrue);
}
break;
case 'email':
if (value) {
validatorsToAdd.push(Validators.email);
}
break;
case 'minLength':
validatorsToAdd.push(Validators.minLength(value));
break;
case 'maxLength':
validatorsToAdd.push(Validators.maxLength(value));
break;
case 'pattern':
validatorsToAdd.push(Validators.pattern(value));
break;
case 'nullValidator':
if (value) {
validatorsToAdd.push(Validators.nullValidator);
}
break;
default:
break;
}
}
this.dataForm.addControl(
control.name,
this.fb.control(control.value, validatorsToAdd)
);
}
console.log('data form: ', this.dataForm);
}
```
## :cool: Features
* Defines reactive form controls from a JSON file
## :clipboard: Status & To-do list
* Status: Working
* To-do: Nothing
## :clap: Inspiration
* [Josh Morony: Create a Dynamic Reactive Angular Form with JSON](https://www.youtube.com/watch?v=ByHw_RMjkKM&t=48s)
## :file_folder: License
* N/A
## :envelope: Contact
* Repo created by [ABateman](https://github.com/AndrewJBateman), email: `[email protected]`