@myndpm/dyn-forms

Abstract layer to easily generate Dynamic Forms for Angular.

With this library we are able to dynamically create the Form Controls hierarchy from a Configuration Object, which is comprised of nested configuration objects which corresponds one-to-one with form controls.

The documentation is available at mynd.dev/docs/dyn-forms.
A general introduction is presented in this article, the big picture is shown in this Prezintation, you can play with live code in this StackBlitz and you can join us on Discord.

Technical packages and sequence diagrams are also available.

Installation

Add this library to your Angular project:

npm install @myndpm/dyn-forms

and import a ui-package to provide controls like the Dynamic-Forms-Material module:

import { DynFormsMaterialModule } from '@myndpm/dyn-forms/ui-material';

@NgModule({
  imports: [
    DynFormsMaterialModule.forFeature(),

you also can provide your own DynControls (explained later):

import { DynFormsModule } from '@myndpm/dyn-forms';

@NgModule({
  imports: [
    DynFormsModule.forFeature({
      controls: [
        SelectComponent, // 'MYSELECT'
        InputComponent, // 'MYINPUT'
      ],
    }),

where SelectComponent and InputComponent are already implemented in DynFormsMaterialModule.

Then with the provided controls you could use them in a Form Configuration like this:

export class MyFormComponent {
  form = new FormGroup({});

  config: DynFormConfig = {
    controls: [
      {
        control: 'MYSELECT',
        name: 'option',
        params: {
          label: 'Pick an Option',
          options: [
            { value: 'Option 1', key: 1 },
            { value: 'Option 2', key: 2 },
          ],
        },
      },
      {
        control: 'MYINPUT',
        name: 'quantity',
        validators: [Validators.required],
        params: {
          label: 'Quantity',
          type: 'number',
        },
      },
    ];
  }
}

and pass them to the dyn-form component in its template:

<dyn-form [form]="form" [config]="config"></dyn-form>

and that's it!
now you can customize the styles and build some custom controls.

Helpers

The DynFormsMaterialModule provides a typed Factory Method to easily create the config objects corresponding to its DynControls; for example:

import { createMatConfig } from '@myndpm/dyn-forms/ui-material';

export class MyFormComponent {
  config: DynFormConfig = {
    controls: [
      createMatConfig('CARD', {
        name: 'group',
        params: { title: 'My Card' },
        controls: [
          createMatConfig('INPUT', {
            name: 'firstName',
            validators: [Validators.required],
            params: { label: 'First Name' },
          }),
          createMatConfig('INPUT', {
            name: 'lastName',
            validators: [Validators.required],
            params: { label: 'Last Name' },
          }),
        ],
      }),
    ]
  };
}

This factory will warn you if the provided config object doesn't correspond to the ControlType.

DynControl

A Dynamic Control is an Angular component that has a static dynControl field which acts as an unique ID. We can reference any component from the configuration object with this ID.

While creating a new form the library recursively instantiates these Dynamic Controls components, and populates their core fields:

1. Its corresponding config,
2. any params values specified in the config,
3. the corresponding control instance (FormControl, FormGroup or FormArray).

From there, we have the required tools for the component to provide any functionality.

Extending

You can check out the example source code of @myndpm/dyn-forms/ui-material. Basically your custom controls need to extend the respective Abstract Dynamic Control (DynFormControl, DynFormArray, DynFormGroup or DynFormContainer) which register the corresponding Form Control into the hierarchy specified in the nested Config Object.

You just need to implement static dynControl property which is the unique place where you define your control identificator, and the completeParams method, which is useful to ensure that any partially configured parameters will have the required fields and the template won't be broken. Also, if you implement OnInit or AfterViewInit be sure to call the base class too, with super.ngOnInit() and super.AfterViewInit() respectively.

As mentioned in the Installation section, you can provide your controls with the useful DynFormsModule.forFeature({ providers, controls }) to avoid boilerplate.

Share your Feedback

Please share your experience and ideas!
Impressions, sugestions, improvements, use cases that you've implemented or your company needs, everything is welcome in the GitHub Discussions.
As usual, please report any Issue or request a Feature.

Enjoy!

− Mynd.co Frontend Engineering