dynamic-reactive v1.0.1

DynamicReactive

This library was generated with Angular CLI version 8.2.14.

Objective

This library helps to develop simple form using dynamic form.

Code scaffolding

Run ng generate component component-name --project DynamicReactive to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module --project DynamicReactive.

Note: Don't forget to add --project DynamicReactive or else it will be added to the default project in your angular.json file.

Build

Run ng build DynamicReactive to build the project. The build artifacts will be stored in the dist/ directory.

Publishing

After building your library with ng build DynamicReactive, go to the dist folder cd dist/dynamic-reactive and run npm publish.

Running unit tests

Run ng test DynamicReactive to execute the unit tests via Karma.

Dependencies

@Bootstrap @npm DynamicReactive

Steps to use

This document explains using dynamic reactive for for creating user registration form.

1. Create a project
2. Install libarary using "npm i dynamic-reactive"

3. Import DynamicReactiveModule in app.module.ts

   @NgModule({ declarations: [ AppComponent, UserRegistrationComponent ], imports: [ CommonModule, BrowserModule, DynamicReactiveModule, AppRoutingModule ], providers: [ UserRegistrationService ], bootstrap: [AppComponent] }) export class AppModule { }

4. Add file form-control-types.ts in src/app and add below lines export const FORMCONTROLTYPES = Object.freeze({ TEXTBOX: 'text', PASSWORD: 'password', NUMBER_INPUT: 'number', FILE_INPUT: 'file', TEXTAREA: 'textarea', RADIO_INPUT: 'radio', CHECKBOX_INPUT: 'checkbox', DROPDOWN: 'dropdown', BUTTON: 'button', BUTTON_SUBMIT: 'submit' });

5. Create user-registration component using ng g c user-registration

6. Add routes in app.routing.module.ts const routes: Routes = [ { path: '', component: UserRegistrationComponent } ];

7. Create service using ng g s user-registration and add it in app.module.ts and add below code in it configureFormElements(): ReactiveFormelements[] { return [ { key: 'username', controlType: FORMCONTROLTYPES.TEXTBOX, label: 'UserName', class: 'form-control', placeholder: 'Enter UserName', order: 1, validators: { validation: [Validators.required], errorMessage: 'Username is Required' } }, { key: 'mobile', controlType: FORMCONTROLTYPES.TEXTBOX, type: FORMCONTROLTYPES.NUMBER_INPUT, label: 'Mobile Number', class: 'form-control', order: 2, placeholder: 'Enter Mobile Number', validators: { validation: [Validators.required], errorMessage: 'Mobile Number is Required' } }, { key: 'address', controlType: FORMCONTROLTYPES.TEXTAREA, type: FORMCONTROLTYPES.TEXTAREA, label: 'Address', class: 'form-control', textarea: {rows: 5, cols: 10}, placeholder: 'Enter Address', order: 3, validators: { validation: [Validators.required], errorMessage: 'Adress is Required' } }, { key: 'gender', controlType: FORMCONTROLTYPES.RADIO_INPUT, type: FORMCONTROLTYPES.RADIO_INPUT, label: 'Select Gender', class: 'form-control', options: [ { key: 'male', value: 'Male'}, { key: 'female', value: 'FeMale'}, ], validators: { validation: [Validators.required], errorMessage: 'Gender is Required' } }, { key: 'country', controlType: FORMCONTROLTYPES.DROPDOWN, type: FORMCONTROLTYPES.DROPDOWN, label: 'Select Country', class: 'form-control', options: [ { key: 'india', value: 'India'}, { key: 'us', value: 'United State of America'}, ], value: 'india', validators: { validation: [Validators.required], errorMessage: 'Country is Required' } }, { key: 'education', controlType: FORMCONTROLTYPES.DROPDOWN, type: FORMCONTROLTYPES.DROPDOWN, label: 'Select Education', class: 'form-control', options: [ { key: 'classX', value: 'Class X'}, { key: 'classXII', value: 'Class XII'}, ], dropdown: {multipleSelection: true}, value: ['classXII'], validators: { validation: [Validators.required], errorMessage: 'Education Details Required' } }, { key: 'addressProof', controlType: FORMCONTROLTYPES.FILE_INPUT, label: 'Select Address Proof', class: 'form-control', placeholder: 'Choose File', order: 1, }, { key: '', controlType: FORMCONTROLTYPES.BUTTON, type: FORMCONTROLTYPES.BUTTON_SUBMIT, label: '', submitButton: { label: 'Submit', class: 'btn btn-success', // eventOnSubmit: true, // submitOnValid: true } } ]; }

8. user-registration.component.ts

   export class UserRegistrationComponent implements OnInit { formElements: ReactiveFormelements[] = [];

   constructor(
     private userRegistrationService: UserRegistrationService
   ) { }
   
   ngOnInit() {
     this.defineFormElements();
   }
   
   defineFormElements() {
     this.formElements = this.userRegistrationService.configureFormElements();
   }
   
   onFormChange(formEvent) {
     console.log('formEvenet', formEvent);    
   }
   
   onFormSubmission(formEvent) {
     console.log('formEvenet', formEvent);    
   }

   }

9. user-registration.component.html

   <DynRea-DynamicReactive formElements="formElements" (formElementsChange)="onFormChange($event)" (formSubmit)="onFormSubmission($event)">

10. Run the project using ng serve

Please drop an email to aish.anu16@gmail.com if there are any issues.