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!

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:

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

{
  "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

{
  "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