Skip to content

πŸ“‹ Displays a reactive form with controls defined in a JSON file. Code from Josh Morony.

Notifications You must be signed in to change notification settings

AndrewJBateman/ionic-api-techdata

Repository files navigation

⚑ 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

GitHub repo size GitHub pull requests GitHub Repo stars GitHub last commit

πŸ“„ Table of contents

πŸ“š General info

πŸ“· Screenshots

techData screen print

πŸ“Ά Technologies

πŸ’Ύ 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

πŸ“ License

  • N/A

βœ‰οΈ Contact

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

About

πŸ“‹ Displays a reactive form with controls defined in a JSON file. Code from Josh Morony.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published