dynamic-angular-form v19.0.6

DynamicForm

This Library was born to help peoples to integrate various forms in one. With the ausily of a json file pattern we can generate forms dynamically based on fields specified into JSON Pattern File.

Repository GITHUB : DynamicAngularForm

Requirements

For the installation we need to use the following versions of :

Node.JS : v20.13.1

Angular : 17 - 18 - 19

The library come with preinstalled @angular-slider/ngx-slider for the rendering of Slider form inputs, @ng-bootstrap/ng-bootstrap for the Date and Time Picker and ng-recaptcha-2 for the rendering og Google Recaptcha security feature.

Installation

First of all you need to install the library running :

 npm i dynamic-angular-form@19.0.2

Subsequently you need to import the module into app.module.ts

@NgModule({
  declarations: [	
    AppComponent
   ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    DynamicFormModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Note : If you want to use Google Login addon or Google Recaptcha input, you have to pass correctly the Google Recaptcha Key for making work Google Recaptcha and the Google Client Id for making work Google Login lib

@NgModule({
  declarations: [	
    AppComponent
   ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    DynamicFormModule.forRoot(environment.recaptchaSiteKey,environment.googleClientId)
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Models and Usage

Below you will find all the information you need to correctly use the templates and the various components

Dynamic Modal

<dynamic-modal />

Input

Output

Functions

To use it correctly declare a child in your component : TS ->

  @ViewChild('myModal') registerFormModal!: DynamicModalComponent

HTML ->

 <dynamic-modal #myModal (onSubmit)="submit($event)" [formSchemes]="registerScheme" modalId="modal-1" />

Dynamic Form

<dynamic-form />

Input

Output

Functions

To use it correctly declare a child in your component : TS ->

  @ViewChild('form') registerForm!: DynamicFormComponent

HTML ->

 <dynamic-form #form (onSubmit)="submit($event)" [formSchemes]="registerScheme" />

DynamicFormScheme

FieldScheme

FieldType (Enum)

SelectValueScheme

AddonScheme

AddonType (Enum)

HrefTypes (Enum)

ButtonScheme

ButtonType (Enum)

CustomValidatorScheme

ErrorScheme

ValidatorScheme

Errors (Enum)

Other Components

Button Loader

<button-loader />

Input

Output

Google Login

<google-login />

Input