- 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
- Angular ChangeDetectionStrategy set to OnPush, so automatic change detection set to off.
- 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
- Load dependencies using
npm i, - To start the server on localhost://8100 type: 'ionic serve'
json-form.component.tsmethod to create a form from thedata-form.jsonvalues
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); }
- Defines reactive form controls from a JSON file
- Status: Working
- To-do: Nothing
- N/A
- Repo created by ABateman, email:
[email protected]