feat: add event handlers (#10)

Co-authored-by: xixas <[email protected]>
Co-authored-by: kshitij.k <[email protected]>
Co-authored-by: Ashutosh Bisoyi <[email protected]>

README.md

@@ -32,6 +32,10 @@ OsmosysForm is comprised of the following components:
 2. **FormService**: A service for handling API calls and form submission logic.
 3. **Validators**: Custom validators for various input types and conditions.
 
+## Setup/Installation and Usage
+
+Read about how to use it [here](docs/usage.md)
+
 ## Contributing
 
 We welcome contributions from the community! If you're interested in contributing to OsmosysForm, please take a moment to review our [Contribution Guidelines](CONTRIBUTING.md).
@@ -56,11 +60,4 @@ We appreciate the time and effort put in by all contributors to make this projec
 
 ---
 
-## Installation and Usage
-
-[Publishing Library](projects/osmosys-form/README.md)
-
-TODO: Add detailed installation and usage instructions here.
-
 For more help on the Angular CLI, use `ng help` or check out the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
-

angular.json

@@ -28,27 +28,19 @@
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
             "tsConfig": "projects/osmosys-form/tsconfig.spec.json",
-            "polyfills": [
-              "zone.js",
-              "zone.js/testing"
-            ]
+            "polyfills": ["zone.js", "zone.js/testing"]
           }
         },
         "lint": {
           "builder": "@angular-eslint/builder:lint",
           "options": {
-            "lintFilePatterns": [
-              "projects/osmosys-form/**/*.ts",
-              "projects/osmosys-form/**/*.html"
-            ]
+            "lintFilePatterns": ["projects/osmosys-form/**/*.ts", "projects/osmosys-form/**/*.html"]
           }
         }
       }
     }
   },
   "cli": {
-    "schematicCollections": [
-      "@angular-eslint/schematics"
-    ]
+    "schematicCollections": ["@angular-eslint/schematics"]
   }
 }

docs/usage.md

@@ -0,0 +1,107 @@
+### Osmosys Form Library Documentation
+
+#### Table of Contents
+
+- [Osmosys Form Library Documentation](#osmosys-form-library-documentation)
+  - [Table of Contents](#table-of-contents)
+- [1. Introduction](#1-introduction)
+- [2. Setting Up the Library](#2-setting-up-the-library)
+- [3. Creating the Configuration](#3-creating-the-configuration)
+- [4. Using in Parent Component](#4-using-in-parent-component)
+- [5. Supported Features](#5-supported-features)
+- [6. Demo Repository](#6-demo-repository)
+
+### 1. Introduction
+
+The Osmosys Form Library is a dynamic and configurable form generator for Angular applications. It allows you to create complex forms using a simple JSON configuration. This documentation will guide you through setting up the library, creating a configuration, and using the library in a parent component.
+
+### 2. Setting Up the Library
+
+To use the Osmosys Form Library in your Angular application, you need to follow these steps:
+
+1. **Build and Link the Library**:
+   Since the package is not deployed yet, you need to build and link it locally.
+
+   ```sh
+   ng build osmosys-form --watch
+   cd dist/osmosys-form/ && npm link
+   ```
+
+2. **Link the Library in Your Angular App**:
+   In your Angular application, link the locally built library.
+
+   ```sh
+   npm link osmosys-form
+   ```
+
+3. **Install Required Dependencies**:
+   Ensure you have Bootstrap and other required dependencies installed.
+
+   ```sh
+   npm install bootstrap
+   ```
+
+   Add the following modules to your Angular application:
+
+   ```typescript
+   import { CommonModule } from '@angular/common';
+   import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+   ```
+
+### 3. Creating the Configuration
+
+The configuration for the form is written in JSON format. The basic structure of the configuration includes the form title, layout, rows, columns, and elements.
+
+Key components of the configuration:
+
+- **Title**: The title of the form, which includes text and optional classes for styling.
+- **Layout**: Defines the type of layout (e.g., grid) and the rows within the form.
+- **Rows**: Each row can have multiple columns.
+- **Columns**: Each column can have multiple elements.
+- **Elements**: These are the form fields like input, select, radio, checkbox, textarea, button, etc.
+
+For detailed examples of configuration, refer to the [demo repository](https://github.com/OsmosysSoftware/osmosys-form-builder-demo).
+
+### 4. Using in Parent Component
+
+To use the Osmosys Form Library in your parent component:
+
+1. **Import the OsmosysFormComponent**:
+   Import the OsmosysFormComponent into your parent component.
+
+   ```typescript
+   import { OsmosysFormComponent } from 'osmosys-form';
+   ```
+
+2. **Add OsmosysFormComponent to Parent Component**:
+   Use the `<osmosys-form>` selector in your parent component's template.
+
+3. **Pass Configuration and Handle Actions**:
+   Pass the configuration JSON to the form component and handle form actions using event bindings.
+
+Example usage in HTML:
+
+```html
+<osmosys-form
+  *ngIf="showPreview"
+  [formJsonData]="previewData"
+  (formSubmit)="onFormSubmit($event)"
+  (buttonAction)="onButtonAction($event)"
+  [formInstance]="setFormInstance($event)"
+></osmosys-form>
+```
+
+### 5. Supported Features
+
+The Osmosys Form Library supports the following features:
+
+- **Form Inputs**: Text, Email, Password, Date, File, Range, Select, Multiselect, Radio, Checkbox, Textarea, Color.
+- **Validations**: Supports reactive form validations like required, minlength, maxlength, pattern, etc.
+- **Custom Styling**: You can add custom classes and styles to elements.
+- **Bootstrap Integration**: Uses Bootstrap classes for styling by default.
+- **Dynamic Configuration**: Easily configurable via JSON.
+- **Event Handling**: Emits events for form submission, button actions, and provides form instance.
+
+### 6. Demo Repository
+
+For detailed examples, code snippets, and configurations, please refer to the [Osmosys Form Builder Demo Repository](https://github.com/OsmosysSoftware/osmosys-form-builder-demo). Here, you will find comprehensive examples and usage instructions to help you get started with the Osmosys Form Library in your Angular application.