Dynamic Form Builder for Angular

generate form controls and form array.

Demo

Example form in stackblitz

Field types

• Text
• Range
• Number
• Password
• Color
• Dropdown
• Radio
• Checkbox
• File
• Date
• Datetime local
• Time
• Week
• Month
• Form array

Table of contents

• Install
• Quick start
• Import style and icon
• How to use?
• Input
• Output
• Field properties and methods
• Button setting
• Validators
• Creator
• License

Install

npm i sh-dynamic-form-builder

Install dependencies

Use bootstrap V5

npm install bootstrap --save

npm install bootstrap-icons --save

npm install sh-ordinal-numbers --save

Quick start

import { DynamicFormBuilderModule } from "sh-dynamic-form-builder";

@NgModule({
  imports: [DynamicFormBuilderModule],
})
export class AppModule {}

Import style and icon

In angular.json

"styles": [
    "src/styles.scss",
    "./node_modules/bootstrap/scss/bootstrap.scss",
    "./node_modules/bootstrap-icons/font/bootstrap-icons.scss"
]

How to use?

In component

formGroup = new FormGroup({});
isSubmit: boolean = false;

config: IFormConfig = {
    title: 'Profile',
    fields: [
      {
        type: 'text', name: 'fullName', label: 'Full name', id: 'fullName',
        validators: [
          { rule: 'required', msg: 'Full name is required' },
          { rule: 'minlength', value: 6, msg: 'Full name must be at least 6 characters long' },

        ],
      },
      {
        type: 'form-array',
        label: 'Tasks',
        name: 'tasks',
        formArray: {
          simpleAddButton: true,
          addButtonBGColor: 'green',
          fields: [
            {
              type: 'text', name: 'title', label: 'title', validators: [
                { rule: 'required', msg: 'title is required!' },
                { rule: 'maxlength', value: 50, msg: 'Maximum length should be 50 characters' }
              ]
            },
            {
              type: 'date', name: 'dueDate', label: 'due date', validators: [
                { rule: 'required', msg: 'date is required!' }
              ]
            }
          ]
        }
      },
      {
        type: 'text', name: 'email1', label: 'E-mail',
        validators: [
          { rule: 'email', msg: 'E-mail is wrong' }
        ],
      },
      {
        type: 'file', name: 'avatar', label: 'Avatar',
        onUpload: this.onUpload.bind(this), multipleFile: true
      }
      ...
        buttonSetting: {
      fullWidthButtons: true,
      buttons:
        [
          { type: 'submit', caption: 'Submit', bgColor: 'blue' },
          { type: 'reset', caption: 'Reset', bgColor: 'orange' },
          { type: 'cancel', caption: 'Cancel', bgColor: 'light' }
        ]
    }
}

private onUpload(event: any): void {
    const files = event.files;
    ...
}

 public submit(event: FormGroup): void {
    this.isSubmit = true;
    this.formGroup = event;
    /**Sending data ... */
    this.isSubmit = false;
 }

 public cancel(): void {
    /** */
 }

In template

<div class="container">
  <sh-dynamic-form-builder
    [config]="config"
    [isSubmit]="isSubmit"
    (submit)="submit($event)"
  >
  </sh-dynamic-form-builder>
</div>

Input

• Config

Output

Field properties and methods

• File

  Name	Type	Default	Required?	Description
  onUpload	void	-	yes	File selection event.
  multipleFile	boolean	false	no	Allow choice multiple file

• Text

  Name	Type	Default	Required?	Description
  multiline	boolean	false	no	Multiline handling
  rowCount	number	5	no	Specifies the visible height of a text area, in lines

• Radio

  Name	Type	Default	Required?	Description
  [options]	IOption	-	yes	Define options: {key: string;label: string;}
  inline	boolean	false	no	Show on the same horizontal row

• dropdown

  Name	Type	Default	Required?	Description
  [options]	IOption	-	yes	Define options: {key: string;label: string;}

• Range

  Name	Type	Default	Required?	Description
  rangeMin	number	0	no	value of the min

• Range

  Name	Type	Default	Required?	Description
  rangeMin	number	0	no	value of the min
  rangeMax	number	100	no	value of the max
  rangeStep	number	1	no	value of the step

• Form-array

  Name	Type	Default	Required?	Description
  formArray	IFormArray	-	no	Set form array fields and validations

  • FormArray

    Name	Type	Default	Required?	Description
    [fields]	IFormArrayFieldItem	-	yes	Form array fiels
    simpleAddButton	boolean	false	no	Only icon on button, without text
    addButtonBGColor	string	gray	no	Allowed values: gray, green, blue, orange, light and dark
    divider	IDivider	-	no	doesn't show an ordinal number in the center of the divider line

    • Divider

      Name	Type	Default	Required?	Description
      suppress	boolean	false	no	Doesn't show divider
      lineClass	string	-	no	Set style for divider line, you can add one or more class name split by space. for example:'class1 class2 class3'
      ordinalNumberClass	string	-	no	Set style for ordinal number between divider line, you can add one or more class name split by space. for example:'class1 class2 class3'
      suppressOrdinalNumber	boolean	false	no	Doesn't show an ordinal number in the center of the divider line
      height	number	3	no	The height of divider

Button setting

• Button properties

Validators

• Validator rules

Creator

Hakime sheikhalishahi

• http://www.linkedin.com/in/hakime-sheikhalishahi
• h.sheykhalishahi@gmail.com

License

MIT