An Angular Form Builder

Angular Form Builder is a form developer library that gives users the power to create forms using a JSON schema as input. This is based on the official Angular dynamic forms guide.

It fully automates form UI creation by introducing a set of maintainable form control models and dynamic form control components

Out of the box support is provided for Material.

Explore it live in action!

Supported Form Controls

Here is the list of form controls which are currently supported by the module. In order to make the form controls look pretty, we have used Angular Material:

1. Checkboxes (Group)
2. Radio Button (Group)
3. Plain input (Text, Number)
4. Select

Installation

Install the core package:

npm i angular-form-builder --save

Basic Usage

1. Import FormBuilderModule:

import { FormBuilderModule } from "angular-form-builder";
// ...

@NgModule({
    
    imports: [
      FormBuilderModule
      // ...
    ]
})

export class AppModule {}

2. Define your form model: You can provide a form model in plain JSON.

const questions = [
    {
        type: 'INPUT',
        id: 'sampleInput',
        label: 'Sample Input',
        maxLength: 42,
        placeholder: 'Sample input'
    },
    {
        type: 'RADIO_GROUP',
        id: 'sampleRadioGroup',
        label: 'Sample Radio Group',
        options: [
            {
                label: 'Option 1',
                value: 'option-1',
            },
            {
                label:'Option 2',
                value: 'option-2'
            },
            {
                label: 'Option 3',
                value: 'option-3'
            }
        ],
        value: 'option-3'    
    }
    {
        type: 'CHECKBOX',
        id: 'sampleCheckbox',
        label: 'I do agree'
    }
]

const displayFields = (form) => {
  console.log(form.getRawValue()); // The aggregate value of the FormGroup, including any disabled controls.
  console.log(form.value); // The aggregate value of the FormGroup, excluding any disabled controls.
}

3. Add a AngularFormComponent to your template and bind its [questions] property and (formValue) event:

<angular-form-builder 
  [questions]="questions" 
  title="Testing Library" 
  (formSubmit)="displayFields($event)" 
  (formReset)="displayFields($event)"
>
</angular-form-builder>

Form control parameters

Name | Type | Required? | Description --- | --- | --- | --- controlType | string | Optional | Form control to be used key | string | Optional | Key in the generated form Schema label | string | Optional | Placeholder for form control hintLabel | string | Optional | Placeholder for hint for input controls value | any | Optional | Defines form submit button text disabled | boolean | Optional | Decides if form control is Read Only order | number | Optional | Order in which form controls should be rendered validators | { key: string; value: string } | Optional | Check Table below for possible keys and their values. options | { key: string; value: string }[] | Optional | Values for select, radio group controls.

Validators

Name | Type | Description --- | --- | --- min | number | Validator that requires controls to have a value greater than a number. max | number | Validator that requires controls to have a value less than a number. pattern | string | Validator that requires a control to match a regex to its value. email | boolean | Validator that performs email validation. required | boolean | Validator that requires controls to have a non-empty value. minLength | number | Validator that requires controls to have a value of a minimum length. maxLength | number | Validator that requires controls to have a value of a maximum length.

Running the Sample

$ npm install
$ npm start

Then navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action. You can play around with the form builder by modifying the form-builder-schema in app.service.ts.

Running the Sample

1. Clone the Git repository:

git clone https://github.com/AbigailFernandes/angular-form-builder.git
cd angular-form-builder

2. Install the dependencies:

npm install

3. Run the application:

npm start

Then navigate to http://localhost:4200/ in your browser and you should be able to see the form builder in action. You can play around with the form builder by modifying the form-builder-schema in app.service.ts.