Form Preview Library

A versatile Angular library for rendering dynamic forms from JSON configurations.

Installation

npm install prpl-form-preview-lib

Features

• Dynamic form rendering from JSON configuration
• Multiple input types supported:
  • Text inputs
  • Textareas
  • Select dropdowns
  • Checkboxes
  • Radio buttons
  • Date/time inputs
  • Info blocks
• Form validation
• Form submission handling
• Reset functionality

Usage

Import the module in your application:

import { FormPreviewModule } from 'prpl-form-preview-lib';

@NgModule({
  imports: [
    // ... other imports
    FormPreviewModule,
  ],
})
export class AppModule {}

For standalone components:

import { FormPreviewComponent } from 'prpl-form-preview-lib';

@Component({
  // ... component metadata
  imports: [FormPreviewComponent],
})
export class YourComponent {}

Basic Implementation

<fpl-form-preview [formComponents]="formComponents"></fpl-form-preview>

import { IFormComponent } from 'prpl-form-preview-lib';

@Component({
  // ... component metadata
})
export class YourComponent {
  formComponents: IFormComponent[] = [
    {
      id: 'firstName',
      type: 'input',
      properties: {
        label: 'First Name',
        placeholder: 'Enter your first name',
        value: '',
        required: true,
        readonly: false,
        disabled: false,
        errorMessage: 'First name is required',
      },
    },
    // Add more form components as needed
  ];
}

Form Component Interface

export interface IFormComponent {
  id: string;
  type: IComponentType;
  properties: IFormComponentProperties;
}

export type IComponentType = 'input' | 'textarea' | 'text' | 'select' | 'checkbox' | 'radio' | 'date-time' | 'info';

export interface IFormComponentProperties {
  label: string;
  placeholder: string;
  value: string;
  required: boolean;
  readonly: boolean;
  disabled: boolean;
  defaultValue?: string;
  type?: IComponentType;
  errorMessage?: string;
  rows?: number; // for textarea
  options?: ISelectOption[]; // for select
}

export interface ISelectOption {
  label: string;
  value: string;
}

Styles

This library depends on styles from the main application. To use the library styles properly:

Option 1: Import in your global stylesheet

/* In your styles.scss */
// @import 'node_modules/prpl-form-preview-lib/styles';
// or try:
@use 'prpl-form-preview-lib/src/lib/styles/assets/global.scss' as *;
@use 'prpl-form-preview-lib/src/lib/styles/assets/theme.scss' as *;

Option 2: Angular Configuration

Add the library's styles to your angular.json file:

"architect": {
  "build": {
    "options": {
      "styles": [
        "src/styles.scss",
        // "node_modules/prpl-form-preview-lib/styles.scss",
        "node_modules/prpl-form-preview-lib/src/lib/styles/assets/global.scss",
        "node_modules/prpl-form-preview-lib/src/lib/styles/assets/theme.scss"
      ]
    }
  }
}

License

MIT