Angular JSON Form

The Angular JSON Form Library (angular18-json-form) provides a dynamic and flexible way to create forms based on JSON configuration. It supports various input types, validations, custom styling, and error handling.

Features

• Dynamic Form Generation: Create forms based on JSON configuration.
• Various Input Types: Supports text, number, email, select, checkbox, radio, and file inputs.
• Custom Styling: Apply custom classes and styles to individual fields and the entire form.
• Validation Support: Includes built-in and custom validations.
• Error Handling: Dynamically handle and display validation errors.
• Customizable Labels: Set custom labels with styling options.

Storybook

To view the component in action, goto: Angular JSON Form

Installation

To install the library, use npm:

npm install angular18-json-form

Usage

Import the Library

Import the JsonFormModule into your Angular module:

import { AngularJsonForm } from 'angular18-json-form'

@NgModule({
  imports: [
    // other imports
    AngularJsonForm
  ],
  // other module settings
})
export class AppModule { }

Basic Usage

Use the component in your template and pass the configuration via the config input property.

Example Configuration

const formConfig = {
  globalLabelClass: 'global-label-class',
  globalLabelStyle: {
    'font-weight': 'bold',
    'color': '#333'
  },
  formConfig: {
    class: 'custom-form-class',
    style: {
      'padding': '20px',
      'background-color': '#f9f9f9'
    },
    buttonClass: 'custom-button-class',
    buttonStyle: {
      'background-color': '#007bff',
      'color': '#fff',
      'border': 'none',
      'padding': '10px 20px',
      'border-radius': '5px'
    }
  },
  fields: [
    {
      name: 'username',
      type: 'text',
      label: 'Username',
      class: 'custom-input-class',
      style: {
        'border': '1px solid #ccc'
      },
      labelClass: 'custom-label-class',
      labelStyle: {
        'color': 'blue'
      },
      errorClass: 'custom-error-class',
      errorStyle: {
        'color': 'red',
        'font-size': '12px'
      },
      validations: [
        { name: 'required' },
        { name: 'minlength', value: 3 },
        { name: 'pattern', value: '^[a-zA-Z0-9]*$' }
      ]
    },
    {
      name: 'email',
      type: 'email',
      label: 'Email',
      validations: [
        { name: 'required' },
        { name: 'email' }
      ]
    },
    // Add more fields as needed
  ]
};

Using the Component

In your component template:

<angular-json-form [json]="formConfig" (onSubmit)="onSubmit($event)"></angular-json-form>

“ tabindex=”0" role=”button” style=”box-sizing: border-box; position: relative; display: inline-block; padding: 0px !important; font-size: 14px; font-weight: var( — base-text-weight-medium, 500); line-height: 20px; white-space: nowrap; vertical-align: middle; cursor: pointer; user-select: none; border-width: 1px; border-style: solid; border-color: var( — button-default-borderColor-rest, var( — color-btn-border)); border-image: initial; border-radius: 6px; appearance: none; color: var( — button-default-fgColor-rest, var( — color-btn-text)); background-color: var( — button-default-bgColor-rest, var( — color-btn-bg)); box-shadow: var( — button-default-shadow-resting, var( — color-btn-shadow)),var( — button-default-shadow-inset, var( — color-btn-inset-shadow)); transition: color 80ms cubic-bezier(0.33, 1, 0.68, 1) 0s, background-color, box-shadow, border-color; margin: var( — base-size-8, 8px) !important;”>

Get Abhishek Vishwakarma’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

In your component class:

export class AppComponent {
  formConfig = formConfig;
}

Configuration Options

formConfig

• class: Custom class for the form element.
• style: Custom style for the form element.
• buttonClass: Custom class for the submit button.
• buttonStyle: Custom style for the submit button.

fields

Each field in the fields array can have:

• name: Field name.
• type: Input type (text, number, email, select, checkbox, radio, file).
• label: Field label.
• class: Custom class for the input element.
• style: Custom style for the input element.
• labelClass: Custom class for the label element.
• labelStyle: Custom style for the label element.
• errorClass: Custom class for error messages.
• errorStyle: Custom style for error messages.
• validations: Array of validation rules:
• name: Validation type (required, minlength, maxlength, pattern, email, max, min).
• value: Validation value (e.g., minimum length).

Example

Here’s a full example of a form configuration and how to use it in your Angular application.

JSON Configuration

const formConfig = {
  globalLabelClass: 'global-label-class',
  globalLabelStyle: {
    'font-weight': 'bold',
    'color': '#333'
  },
  formConfig: {
    class: 'custom-form-class',
    style: {
      'padding': '20px',
      'background-color': '#f9f9f9'
    },
    buttonClass: 'custom-button-class',
    buttonStyle: {
      'background-color': '#007bff',
      'color': '#fff',
      'border': 'none',
      'padding': '10px 20px',
      'border-radius': '5px'
    }
  },
  fields: [
    {
      name: 'username',
      type: 'text',
      label: 'Username',
      class: 'custom-input-class',
      style: {
        'border': '1px solid #ccc'
      },
      labelClass: 'custom-label-class',
      labelStyle: {
        'color': 'blue'
      },
      errorClass: 'custom-error-class',
      errorStyle: {
        'color': 'red',
        'font-size': '12px'
      },
      validations: [
        { name: 'required' },
        { name: 'minlength', value: 3 },
        { name: 'pattern', value: '^[a-zA-Z0-9]*$' }
      ]
    },
    {
      name: 'email',
      type: 'email',
      label: 'Email',
      validations: [
        { name: 'required' },
        { name: 'email' }
      ]
    },
    {
      name: 'subscribe',
      type: 'checkbox',
      label: 'Subscribe to Newsletter',
      class: 'custom-checkbox-class',
      style: {
        'margin': '10px 0'
      }
    },
    {
      name: 'gender',
      type: 'radio',
      label: 'Gender',
      options: [
        { value: 'male', label: 'Male' },
        { value: 'female', label: 'Female' }
      ]
    },
    {
      name: 'profilePicture',
      type: 'file',
      label: 'Profile Picture'
    }
  ]
};

Component Usage

In your component template:

<angular-json-form [json]="formConfig" (onSubmit)="onSubmit($event)"></angular-json-form>

“ tabindex=”0" role=”button” style=”box-sizing: border-box; position: relative; display: inline-block; padding: 0px !important; font-size: 14px; font-weight: var( — base-text-weight-medium, 500); line-height: 20px; white-space: nowrap; vertical-align: middle; cursor: pointer; user-select: none; border-width: 1px; border-style: solid; border-color: var( — button-default-borderColor-rest, var( — color-btn-border)); border-image: initial; border-radius: 6px; appearance: none; color: var( — button-default-fgColor-rest, var( — color-btn-text)); background-color: var( — button-default-bgColor-rest, var( — color-btn-bg)); box-shadow: var( — button-default-shadow-resting, var( — color-btn-shadow)),var( — button-default-shadow-inset, var( — color-btn-inset-shadow)); transition: color 80ms cubic-bezier(0.33, 1, 0.68, 1) 0s, background-color, box-shadow, border-color; margin: var( — base-size-8, 8px) !important;”>

In your component class:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  formConfig = formConfig;
}

Contributing

Feel free to contribute by submitting issues, feature requests, or pull requests. Please follow the contribution guidelines.

License

This library is licensed under the MIT License.

Contact

For questions or feedback, please contact abhishek@pmaxtek.com.