AndrewJBateman / ionic-api-techdata

:clipboard: Displays a reactive form with controls defined in a JSON file. Code from Josh Morony.

⚡ 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 (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);
  }

🆒 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: [e-mail]