⚡ Ionic API TechData

• Displays a reactive form with controls defined in a JSON file
• Code from Joshua Morony - see 👏 Inspiration below
• Note: to open web links in a new window use: ctrl+click on link

📄 Table of contents

• ⚡ Ionic API TechData
  • 📄 Table of contents
  • 📚 General info
  • 📷 Screenshots
  • 📶 Technologies
  • 💾 Setup
  • 💻 Code Examples
  • 🆒 Features
  • 📋 Status & To-do list
  • 👏 Inspiration
  • 📁 License
  • ✉️ Contact

📚 General info

• Angular ChangeDetectionStrategy set to OnPush, so automatic change detection set to off.

📷 Screenshots

📶 Technologies

• Ionic/angular v7
• Ionic v7
• Angular v16
• Reactive Forms model-driven approach to handling form inputs whose values change over time.
• Transform.Tools online data format conversion

💾 Setup

• Load dependencies using npm i,
• To start the server on localhost://8100 type: 'ionic serve'

💻 Code Examples

• json-form.component.ts method to create a form from the data-form.json values

createForm(controls: IJsonFormControls[]){for(constcontrolofcontrols){constvalidatorsToAdd=[];for(const[key,value]ofObject.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);}

🆒 Features

• Defines reactive form controls from a JSON file

📋 Status & To-do list

• Status: Working
• To-do: Nothing

👏 Inspiration

• Josh Morony: Create a Dynamic Reactive Angular Form with JSON

📁 License

• N/A

✉️ Contact

• Repo created by ABateman, email: gomezbateman@yahoo.com