Package Exports
- ngx-dynamic-form
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ngx-dynamic-form) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
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
This library depends on ng2-datepicker, so please for now install it using
npm install ng2-datepicker --saveTo install this library, run:
$ npm install ngx-dynamic-form --saveLink Bootstrap 3 (Updates for other library and bootstrap 4 coming up soon)
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">Consuming this library
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 your 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',
class: 'form-control',
name: 'query',
inputType: 'text',
placeholder: 'Upload Anything'
},
{
type: 'select',
divClass: 'col-lg-6',
label: 'Choose Your Fav',
options: this.foodList,
class: 'form-control',
name: 'food',
inputType: 'text',
placeholder: 'Select Favorite Food'
},
{
type: 'date',
label: 'Choose Your Date of Birth',
divClass: 'col-lg-6',
class: 'form-control',
name: 'date'
},
{
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-2',
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'
};
Development
To generate all *.js, *.d.ts and *.metadata.json files:
$ npm run buildTo lint all *.ts files:
$ npm run lint