@yyasinaslan/dynamic-form

Dynamic Form for Angular 15 + Bootstrap 5

This component library helps you to generate form template with configuration objects.

Demo Site | Npm Package | Github

Advanced usage and detailed documentation will be added soon...

Installation

Install package with npm or yarn

yarn add @yyasinaslan/dynamic-form
#or
npm install @yyasinaslan/dynamic-form

In your angular.json or style.scss include this library styles

angular.json

{
  ...
  "styles": [
    "node_modules/@yyasinaslan/dynamic-form/styles/dynamic-form.css"
  ]
  ...
}

style.scss

@import "node_modules/@yyasinaslan/dynamic-form/styles/dynamic-form.scss";

Import DynamicFormModule to your module or standalone component

import {DynamicFormModule} from "@yyasinaslan/dynamic-form";

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

That's it.

Be careful this package is still under development.

Basic usage

Define your inputs in app component, or anywhere you want like below.

export class AppComponent {

  inputs = [
    new TextBoxInput({
      key: 'firstName',
      value: '',
      label: 'Firstname',
      validators: [Validators.required],
      validatorsMessage: [{key: 'required', message: 'Firstname required'}]
    }),
    new TextBoxInput({
      key: 'lastName',
      value: '',
      label: 'Lastname',
      validators: [Validators.required],
      validatorsMessage: [{key: 'required', message: 'Lastname required'}]
    }),
  ]

  formSubmitHandler(event: FormGroup) {
    // You can get form value with event object
  }
}

In app.component.html you can use dynamic form like this

<ngy-dynamic-form
  [inputs]="inputs"
  (post)="formSubmitHandler($event)"
  formName="userForm"></ngy-dynamic-form>

This will generate form with automatic layout (Bootstrap grid used)