Angular Dynamic Forms

Angular component that allows the creation of dynamic forms. You can use this component in situations where you get the configuration for the form from an external API or if you just hate HTML 😀

List of features

UI Style — for UI I used PrimeNG but you can use any Angular UI Library.

Grid layout — for grid I used PrimeFLEX

• 🦾 Dynamically created form only from JSON configuration
• 😎 Full gird layout for forms
• 🤖 Dummy fields without UI input fields
• 🍀 You can group fields in same column
• 💥 Validation error messages
• 💥 Custom patterns for field value & custom error messages
• 🏗 Responsive forms
• 👇 Easy to add more supported fields

Supported fields by default

You can add more by yourself!

Field	Selector / controlType	Description
Input	input	Text input field.
Textarea	textarea	Textarea field.
Dropdown	dropdown	Dropdown field.
Checkbox	checkbox	Checkbox field.

Installation

Clone repo and run:

npm install

ng serve -o

Usage

There are two ways you can use dynamic forms. The first way is if you have no additional controls other than those in the configuration.

Import module

You can copy the entire form-factory folder into your project and then import FormFactoryModule in app.module.ts

  FormFactoryModule.forRoot({
    fields: [],
  }),

Example 1

  constructor(
    public formFactory: FormFactoryService
  ) {}

  ngOnInit(): void {
    /**
    * Call formFactory service and pass form fields
    * JSON configuration to create new form group
    */
    this.exampleForm = this.formFactory.createForm(this.exampleFields);
    /**
    * Example how to add additional formControl
    * to form ifyou need
    */
    this.exampleForm.addControl('id', new FormControl(1, Validators.required));
  }

  <app-form-factory
    [form]="exampleForm"
    [fields]="exampleFields"
  ></app-form-factory>

Example 2

If you want to insert dynamic fields into one control and add the rest of the field via the form builder, you can do so as follows.

  constructor(
    private fb: FormBuilder,
    public formFactory: FormFactoryService
  ) {}

  ngOnInit(): void {
    this.exampleForm = this.fb.group({
      dynamic: this.formFactory.createForm(this.exampleFields),
      id: ['1', Validators.required],
    });
  }

  <app-form-factory
    [form]="formFactory.getFormGroup(exampleForm,'dynamic')"
    [fields]="exampleFields"
  ></app-form-factory>

Available configuration

Configuration for exsisting fields

General config options description:

Option	Description
controlType	Selector for your form field
colSize	Look at primeflex documentation to see all grid layout classes - PrimeFLEX
options	This options is used to create form field
containerClass	You can add custom CSS class to field container
label	Form field label
placeholder	Form field placeholder
formControlName	Angular reactive forms control name
value	Default value for form field
disabled	Define is field disabled
required	Define is field required
maxLength	Define field max length
pattern	Regex pattern for field

Input field

• controlType: input

{
  "controlType": "input",
  "colSize": "col-12 sm:col-4",
  "options": {
    "containerClass": "mb-0", // Optional
    "label": "Title",
    "placeholder": "Enter title", // Optional
    "formControlName": "title",
    "value": "", // Optional - default is ''
    "disabled": false, // Optional
    "validators": {
      // Optional
      "required": true,
      "maxLength": 200
    }
  }
}

Textarea field

• controlType: textarea

Option	Description
rows	Number of textarea rows

{
  "colSize": "col-12 sm:col-3",
  "controlType": "textarea",
  "options": {
    "containerClass": "mb-0", // Optional
    "label": "Description",
    "placeholder": "My description", // Optional
    "formControlName": "description",
    "value": "", // Optional - default is ''
    "rows": 5, // Optional
    "disabled": false, // Optional
    "validators": {
      // Optional
      "required": true,
      "maxLength": 200
    }
  }
}

Dropdown field

• controlType: dropdown

Option	Description
optionValue	The value to be displayed when selected
optionLabel	The label to be displayed when selected
dropdownOptions	Array with options
value	Default value

{
  "colSize": "col-12",
  "controlType": "dropdown",
  "options": {
    "label": "List",
    "placeholder": "Chose", // Optional
    "formControlName": "someList",
    "optionValue": "value",
    "optionLabel": "label",
    "dropdownOptions": [
      {
        "label": "Item 1",
        "value": 1
      }
    ],
    "value": []
  }
}

Checkbox field

• controlType: checkbox

{
  "colSize": "col-12 sm:col-3",
  "controlType": "checkbox",
  "options": {
    "label": "Remember me",
    "formControlName": "remember",
    "value": true // Optional
  }
}

Custom regex pattern

errorMessage - This message will be displayed if pattern not matched.

{
  "controlType": "input",
  "colSize": "col-12 sm:col-4",
  "options": {
    ...
    "errorMessage": "Please enter a number from 1 to 9",
    "validators": {
      "pattern": "^[0-9]*$", // Any regex pattern
      "required": true,
      "maxLength": 200
    }
  }
}

Dummy fields

This fields doesn`t have UI representation, they just exist in angular form builder.

  [
  ...
  {
    "dummyFields": [
      {
        "options": {
          "formControlName": "dummyField",
          "value": "Hello!",
        },
      },
      {
        "options": {
          "formControlName": "myId",
          "value": "",
        },
      },
    ],
  },
  ...
  ]

Group fields in grid layout

This is example configuration from the image at the top of the documentation. Use group array to pass all the fields you want to be in the same column. Inside group you don't need to define colSize option because it is already defined for the whole group.

fields:FormFactoryModel[] = [
  {
  "colSize": "col-12 sm:col-4",
  "group": [
    {
      "controlType": "input",
      "options": {...}
    }
    {
      "controlType": "input",
      "options": {...}
    }
  ]
},
{
  "colSize": "col-12 sm:col-4",
  "controlType": "textarea",
  "options": {...}
},
{
  "colSize": "col-12 sm:col-4",
  "group": [
    {
      "controlType": "dropdown",
      "options": {...}
    }
    {
      "controlType": "checkbox",
      "options": {...}
    }
  ]
}
]

Add more fields

This system supports some form fields by default (see above). If you want to add fields you can do that in forRoot({}) configuration:

  @NgModule({
    declarations: [...],
    imports: [
      ...
      FormFactoryModule.forRoot({
        fields: [
          {
            type: 'my-custom-field',
            component: MyCustomFieldComponent
          }
        ],
      }),
    ],
    ...
  })
  export class AppModule {}

IMPORTANT - If you want to add your custom field please open some of exsisting form-fields in form-factory/components/form-fields folder and follow the same component structure.

Note that if you want you can pass any form field you created like in example above.

type - Selector that you use for controlType option in JSON configuration.

component - Angular component

Contributing

If you want to contribute to a project and make it better, your help is very welcome. Contributing is also a great way to learn more about social coding on Github, new technologies and and their ecosystems and how to make constructive, helpful bug reports, feature requests and the noblest of all contributions: a good, clean pull request.

About me

Linkedin 👋	Instagram
Martin S.	@maki.stf