Ngx-dynamic-form NPM

ngx-dynamic-form

We noticed that for projects like a portal / dashboard developers need to create several forms again and again. So we thought of something that could make it much more easier and leaving our html code cleaner and we came up with this. This library takes in a json file and gives you a form, so you dont need to create any forms in your projects anymore

Installation

To install this library, run:

$ npm install ngx-dynamic-form --save

You can use any css framework or your own css with this just put in the right divClass and class and you are good to go, but if you are using the datepicker or timepicker it would be advisable to use boostrap 4 but isn't compulsory.

This library presently supports

input (type can be changed in inputType field)
radio
select (from and array `option` and you can also pass in an enum - see example)
textarea
date
timepicker
button
file

if you think we missed something please buzz us on github.

Consuming this library

First you have to install

 npm install @ng-bootstrap/ng-bootstrap@4.0.3 --save

You can import this library in any Angular application from your Angular AppModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// Import the library
import { DynamicFormModule } from 'ngx-dynamic-form';
import { CommonModule } from '@angular/common';
 

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

Once your library is imported, you can use its components in your Angular application:

<!-- You can now use your library component in app.component.html -->
<h1>
  {{title}}
</h1>
 <dynamic-form #dynamicFormName='dynamicForm' [config]='dynamicFormConfig' (submit)='doSomethingCool($event)'></dynamic-form>

In your app.component.ts file you can now create your config please note that all the css for labelClass, divClass and class should be written in css that is called in the html of imported in style.css(.scss).

import { Component } from '@angular/core';
import { Validators } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  foodList= ['Jollof Rice', 'Garri', 'Yam', 'Beans'];
  title = 'app';

  dynamicFormConfig = [
    {
      type: 'input',
      divClass: 'col-lg-6',
      label: 'Hello type ',
      labelClass: 'label label-danger',
      class: 'form-control',
      name: 'query',
      inputType: 'text',
      placeholder: 'Upload Anything',
      validation: [Validators.required]
    },
    {
      type: 'input',
      divClass: 'col-lg-6',
      label: 'Hello type ',
      labelClass: 'label label-danger',
      class: 'form-control',
      name: 'password',
      inputType: 'text',
      placeholder: 'Upload Anything',
      validation: [Validators.required]
    },
    {
      type: 'textarea',
      divClass: 'col-lg-6',
      label: 'Hello type ',
      labelClass: 'label label-danger',
      class: 'form-control',
      name: 'test',
      cols: 8,
      rows: 4,
      placeholder: 'Upload Anything',
      validation: [Validators.required]
    },
    {
      type: 'input',
      divClass: 'col-lg-6',
      label: 'Hello type End',
      labelClass: 'label label-danger',
      class: 'form-control',
      name: 'confirmPassword',
      inputType: 'text',
      placeholder: 'Upload Anything',
      validation: [Validators.required]
    },
    {
      type: 'date',
      divClass: 'col-lg-6',
      label: 'Select date',
      labelClass: 'label label-danger',
      class: 'form-control',
      name: 'date',
      validation: [Validators.required]
    },
    {
      type: 'date',
      divClass: 'col-lg-6',
      label: 'Select date(Min date to 17th Feb, 2019)',
      labelClass: 'label label-danger',
      class: 'form-control',
      minDate: '{year: 2019, month: 3, day:17}',
      name: 'datemin',
      validation: [Validators.required]
    },
    {
      type: 'timepicker',
      divClass: 'col-lg-6',
      label: 'Select Time',
      labelClass: 'label label-danger',
      class: 'form-control',
      name: 'time',
      validation: [Validators.required]
    },
    {
      type: 'timepicker',
      divClass: 'col-lg-6',
      label: 'Select Time',
      labelClass: 'label label-danger',
      class: 'form-control',
      meridian: true,
      name: 'time',
      validation: [Validators.required]
    },
    {
      type: 'date',
      divClass: 'col-lg-6',
      label: 'Select date',
      labelClass: 'label label-danger',
      class: 'form-control',
      name: 'date1',
      validation: [Validators.required]
    },
    {
      type: 'radio',
      divClass: 'col-lg-6',
      label: 'Choose Your Fav',
      options: this.foodList,
      class: 'form-control',
      name: 'food',
      inputType: 'text',
    },
    {
      type: 'select',
      divClass: 'col-lg-5',
      enum: Color,
      label: 'Favorite Color',
      class: 'form-control',
      name: 'mno',
      inputType: 'text',
      placeholder: 'Choose MNO '
    },
    {
      type: 'file',
      divClass: 'col-lg-5',
      label: 'Upload File',
      class: 'form-control',
      name: 'upload',
      placeholder: 'Upload Anything'
    },
    {
      type: 'button',
      divClass: 'col-lg-12',
      label: 'Clicking this means you agree agree with our terms and condition',
      labelClass: 'pad-20',
      text: 'Search',
      inputType: 'submit',
      class: 'btn btn-dcb-info',
      name: 'submit',
    }
  ];

  doSomethingCool(model: any) {
    console.log(model);
  }
}

export enum Color {
  'Blue','Pink','Red','Yellow'
};