@bsachref/ng-form 1.0.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) [2025] [BOUSNINA ACHRAF]
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,143 @@
+```md
+A powerful **dynamic form builder** for **Angular** using **default** **PrimeNG** or **Angular Material**, designed to create and manage forms dynamically from JSON without writing extra HTML.  
+
+---
+
+## 🌟 Features  
+✅ **Dynamic Form Rendering** – Create forms from JSON schema.  
+✅ **PrimeNG and Angular Material Integration** – Works seamlessly with both PrimeNG and Angular Material components.  
+✅ **Validation Support** – Built-in Angular validators.  
+✅ **Custom Event Handling** – Easily handle form submissions.  
+✅ **Customization** – Extendable to fit your needs.  
+
+---
+
+## 📦 Installation  
+
+### 1️⃣ Install via NPM  
+```sh
+npm install @bsachref/ng-forms --save
+```
+
+### 2️⃣ Install Peer Dependencies  
+Since this package relies on Angular and PrimeNG or Angular material, ensure they are installed:  
+
+---
+
+## 🚀 Quick Start  
+
+### 2️⃣ Use in Component
+template
+
+
+Modify `app.component.ts`:  
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  template: `<your-dynamic-form [config]="formConfig" (formSubmit)="onSubmit($event)"></your-dynamic-form>`,
+})
+export class AppComponent {
+    formControls: FormControlConfig[] = [
+    {
+      name: 'firstName',
+      type: 'text',
+      label: 'First Name',
+      uiFramework: 'primeng',
+      validators: [
+        { required: true },
+        { minlength: 2 },
+        { maxlength: 50 },
+      ],
+      class: 'firstname mb-3',
+      style: { 'background-color': 'lightgray' },
+      value: '',
+    },
+    {
+      name: 'email',
+      type: 'email',
+      label: 'Email Address',
+      uiFramework: 'primeng',
+      class: 'input-class mt-2',
+      validators: [
+        { required: true },
+        { email: true },
+      ],
+      value: '',
+    }
+  ];
+
+  onSubmit(formData: any) {
+    console.log('Form Submitted:', formData);
+  }
+}
+```
+
+---
+
+## 🛠 Available Form Controls  
+| Type           | Description                                                               |
+|----------------|---------------------------------------------------------------------------|
+| `input`        | Basic text input (work with default and angular material)                 |
+| `email`        | Email input (work with default and primeng)                               |
+| `password`     | Password input  (work with default and primeng)                           |
+| `select`       | Dropdown selection   (work with default, angular material and primeng)    |
+| `checkbox`     | Toggle checkbox (work with default, angular material and primeng)         |
+| `radio`        | Radio button group (work with default, angular material and primeng)      |
+| `textarea`     | Multi-line text area (work with default, angular material and primeng)    |
+| `datepicker`   | Angular material datepicker input                                         |
+| `text`         | Primeng text input                                                        |
+| `number`       | Primeng number input                                                      |
+| `multi-select` | Primeng multi select input                                                |
+| `date`         | Primeng date select                                                       |
+| `toggle`       | Primeng toggle                                                            |
+| `slider`       | Primeng slider                                                            |
+
+> **Note:** The `primeng file` input is not currently supported in this version. It might be added in upcoming versions.
+---
+
+## 🔥 Full Example with Validations  
+
+```md
+For a full example with validations, check out this [CodeSandbox](https://codesandbox.io/p/devbox/g8jy7t).
+```
+```
+
+---
+
+## 📖 Documentation  
+For full documentation, visit [GitHub](https://github.com/bsachref/ngForm).  
+
+---
+
+## 🏆 Support & Contributions  
+If you love this project, consider supporting me:  
+- ☕ [Buy Me a Coffee](https://buymeacoffee.com/bsachref)  
+- 💖 [Sponsor on GitHub](https://github.com/sponsors/bsachref)  
+- ⭐ [Star this repo](https://github.com/bsachref/ngForm)  
+
+---
+
+## 🚀 Contributing  
+1. Fork the repository.  
+2. Clone your fork:  
+   ```sh
+   git clone https://github.com/bsachref/ngForm.git
+   ```
+3. Create a feature branch:  
+   ```sh
+   git checkout -b feature-new-component
+   ```
+4. Commit your changes and push:  
+   ```sh
+   git commit -m "Added new component"  
+   git push origin feature-new-component
+   ```
+5. Submit a Pull Request.  
+
+---
+
+## 📝 License  
+MIT © 2025 BOUSNINA Achraf  
+```

package/app/default-forms/default-forms.component.d.ts

@@ -0,0 +1,22 @@
+import { ChangeDetectorRef } from '@angular/core';
+import { FormGroup, FormBuilder } from '@angular/forms';
+import { FormControlConfig } from '../formControlConfig';
+import * as i0 from "@angular/core";
+export declare class DefaultFormsComponent {
+    private fb;
+    private cdr;
+    formName: import("@angular/core").InputSignal<string>;
+    controls: import("@angular/core").InputSignal<FormControlConfig[]>;
+    formSubmit: import("@angular/core").OutputEmitterRef<Record<string, any>>;
+    form: FormGroup;
+    private formChanges$;
+    constructor(fb: FormBuilder, cdr: ChangeDetectorRef);
+    ngOnInit(): void;
+    private initializeForm;
+    private getValidators;
+    private updateValidators;
+    private shouldRequireValidation;
+    onSubmit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DefaultFormsComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DefaultFormsComponent, "default-forms", never, { "formName": { "alias": "formName"; "required": true; "isSignal": true; }; "controls": { "alias": "controls"; "required": true; "isSignal": true; }; }, { "formSubmit": "formSubmit"; }, never, never, true, never>;
+}

package/app/file-upload-accessor.directive.d.ts

@@ -0,0 +1,13 @@
+import { ControlValueAccessor } from '@angular/forms';
+import { FileUpload } from 'primeng/fileupload';
+import * as i0 from "@angular/core";
+export declare class FileUploadValueAccessor implements ControlValueAccessor {
+    private host;
+    constructor(host: FileUpload);
+    writeValue(value: any): void;
+    registerOnChange(fn: any): void;
+    registerOnTouched(fn: any): void;
+    setDisabledState(isDisabled: boolean): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FileUploadValueAccessor, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<FileUploadValueAccessor, "p-fileUpload[formControlName], p-fileUpload[formControl], p-fileUpload[ngModel]", never, {}, {}, never, never, true, never>;
+}

package/app/formControlConfig.d.ts

@@ -0,0 +1,203 @@
+import { ValidatorFn } from "@angular/forms";
+/**
+ * Interface representing the configuration for a form control.
+ */
+export interface FormControlConfig {
+    /**
+     * The name of the form control.
+     */
+    name: string;
+    /**
+     * The type of the form control. Possible values include 'input', 'select', 'textarea', 'checkbox', 'radio', 'file', 'calendar', etc.
+     */
+    type: string;
+    /**
+     * Options for 'select', 'radio', 'dropdown' controls. Each option can be an object with a label and value or a string.
+     */
+    options?: Array<{
+        label: string;
+        value: any;
+    } | string>;
+    /**
+     * Validators for the form control. Includes standard validators like required, minlength, maxlength, pattern, email, and custom validators.
+     */
+    validators?: {
+        required?: boolean;
+        minlength?: number;
+        maxlength?: number;
+        pattern?: string;
+        email?: boolean;
+        custom?: ValidatorFn;
+    }[];
+    /**
+     * CSS classes to be applied to the form control.
+     */
+    class?: string;
+    /**
+     * Inline styles to be applied to the form control.
+     */
+    style?: any;
+    /**
+     * Default value for the form control.
+     */
+    value?: any;
+    /**
+     * UI framework to be used for the form control. Possible values are 'material', 'primeng', 'default'.
+     */
+    uiFramework?: 'material' | 'primeng' | 'default';
+    /**
+     * Label for the form control.
+     */
+    label?: string;
+    /**
+     * CSS classes to be applied to the label of the form control.
+     */
+    labelClass?: string;
+    /**
+     * Inline styles to be applied to the label of the form control.
+     */
+    labelStyle?: any;
+    /**
+     * Mode for date picker controls. Possible values are 'single' and 'range'.
+     */
+    datePickerMode?: 'single' | 'range';
+    /**
+     * PrimeNG-specific properties for the form control.
+     */
+    primeng?: {
+        icon?: string;
+        showClear?: boolean;
+        multiple?: boolean;
+        maxFileSize?: number;
+        accept?: string;
+        showWeek?: boolean;
+        minDate?: Date;
+        maxDate?: Date;
+        mode?: 'basic' | 'advanced';
+        currency?: string;
+        decimalSeparator?: string;
+        step?: number;
+        range?: boolean;
+        scrollHeight?: string;
+        showToggleAll?: boolean;
+        showButtons?: boolean;
+        panelClass?: string;
+        chooseLabel?: string;
+        clearLabel?: string;
+        todayLabel?: string;
+        timeOnly?: boolean;
+        hourFormat?: string;
+        minuteFormat?: string;
+        secondsFormat?: string;
+        showSeconds?: boolean;
+        showMillisec?: boolean;
+        timeSeparator?: string;
+        showOnFocus?: boolean;
+        appendTo?: string;
+        inputStyle?: any;
+        inputStyleClass?: string;
+        uploadLabel?: string;
+        cancelLabel?: string;
+        auto?: boolean;
+        url?: string;
+        withCredentials?: boolean;
+        customUpload?: string;
+        showUploadButton?: boolean;
+        showCancelButton?: boolean;
+        showUploadIcon?: boolean;
+        showRemoveIcon?: boolean;
+        showPreview?: boolean;
+        previewWidth?: number;
+        chooseOptions?: any;
+        showTime?: boolean;
+        showDate?: boolean;
+        showIcon?: boolean;
+        iconPos?: 'left' | 'right';
+    };
+    /**
+     * Angular-specific properties for the form control.
+     */
+    angular?: {
+        readonly?: boolean;
+        autocomplete?: 'on' | 'off';
+        autofocus?: boolean;
+        placeholder?: string;
+        mask?: string;
+        tooltip?: string;
+        icon?: string;
+        prefix?: string;
+        suffix?: string;
+        hint?: string;
+        tabIndex?: number;
+        color?: string;
+        theme?: 'dark' | 'light' | string;
+    };
+    /**
+     * Configuration for dependent fields. Specifies fields that depend on the value of this field and the condition for their dependency.
+     */
+    dependentFields?: {
+        dependsOn: string;
+        condition: (value: any) => boolean;
+    }[];
+    /**
+     * Indicates if the form control is repeatable.
+     */
+    repeatable?: boolean;
+    /**
+     * Function to conditionally render the form control based on the values of other controls.
+     */
+    conditionalRender?: (values: any) => boolean;
+    /**
+     * Group to which the form control belongs.
+     */
+    group?: string;
+    /**
+     * Event handlers for various events related to the form control.
+     */
+    events?: {
+        onChange?: (event: any) => void;
+        onFocus?: (event: any) => void;
+        onBlur?: (event: any) => void;
+        onSelect?: (event: any) => void;
+        onUpload?: (event: any) => void;
+        onKeyUp?: (event: any) => void;
+        onKeyDown?: (event: any) => void;
+        onPaste?: (event: any) => void;
+        onDownload?: (event: any) => void;
+        onClear?: (event: any) => void;
+        onReset?: (event: any) => void;
+        onToggle?: (event: any) => void;
+        onShow?: (event: any) => void;
+        onHide?: (event: any) => void;
+        onOpen?: (event: any) => void;
+        onClose?: (event: any) => void;
+        onPanelClick?: (event: any) => void;
+        onPanelShow?: (event: any) => void;
+        onPanelHide?: (event: any) => void;
+        onPanelOpen?: (event: any) => void;
+        onPanelClose?: (event: any) => void;
+        onPanelToggle?: (event: any) => void;
+        onPanelSelect?: (event: any) => void;
+        onPanelUnselect?: (event: any) => void;
+        onPanelUnselectAll?: (event: any) => void;
+        onPanelReorder?: (event: any) => void;
+        onPanelResize?: (event: any) => void;
+        onPanelDragStart?: (event: any) => void;
+        onPanelDragEnd?: (event: any) => void;
+        onPanelDragOver?: (event: any) => void;
+        onPanelDragLeave?: (event: any) => void;
+        onPanelDrop?: (event: any) => void;
+        onPanelScroll?: (event: any) => void;
+        onPanelFilter?: (event: any) => void;
+        onPanelToggleAll?: (event: any) => void;
+        onPanelShowAll?: (event: any) => void;
+        onPanelHideAll?: (event: any) => void;
+        onPanelOpenAll?: (event: any) => void;
+        onPanelCloseAll?: (event: any) => void;
+        onRemove?: (event: any) => void;
+        onError?: (event: any) => void;
+        onBeforeUpload?: (event: any) => void;
+        onProgress?: (event: any) => void;
+        onSlideEnd?: (event: any) => void;
+    };
+}

package/app/material-form/material-form.component.d.ts

@@ -0,0 +1,19 @@
+import { ChangeDetectorRef } from '@angular/core';
+import { FormGroup, FormBuilder } from '@angular/forms';
+import { FormControlConfig } from '../formControlConfig';
+import * as i0 from "@angular/core";
+export declare class MaterialFormsComponent {
+    private fb;
+    private cdr;
+    formName: import("@angular/core").InputSignal<string>;
+    controls: import("@angular/core").InputSignal<FormControlConfig[]>;
+    formSubmit: import("@angular/core").OutputEmitterRef<Record<string, any>>;
+    form: FormGroup;
+    constructor(fb: FormBuilder, cdr: ChangeDetectorRef);
+    ngOnInit(): void;
+    private initializeForm;
+    private getValidators;
+    onSubmit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MaterialFormsComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MaterialFormsComponent, "material-forms", never, { "formName": { "alias": "formName"; "required": true; "isSignal": true; }; "controls": { "alias": "controls"; "required": true; "isSignal": true; }; }, { "formSubmit": "formSubmit"; }, never, never, true, never>;
+}

package/app/prime-form/prime-form.component.d.ts

@@ -0,0 +1,23 @@
+import { ChangeDetectorRef } from '@angular/core';
+import { FormGroup, FormBuilder } from '@angular/forms';
+import { FormControlConfig } from '../formControlConfig';
+import * as i0 from "@angular/core";
+export declare class PrimeNgFormsComponent {
+    private fb;
+    private cdr;
+    formName: import("@angular/core").InputSignal<string>;
+    controls: import("@angular/core").InputSignal<FormControlConfig[]>;
+    formSubmit: import("@angular/core").OutputEmitterRef<Record<string, any>>;
+    form: FormGroup;
+    private formChanges$;
+    constructor(fb: FormBuilder, cdr: ChangeDetectorRef);
+    ngOnInit(): void;
+    private initializeForm;
+    private getValidators;
+    private updateValidators;
+    private shouldRequireValidation;
+    onFileSelect(event: any, controlName: string): void;
+    onSubmit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PrimeNgFormsComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PrimeNgFormsComponent, "primeng-forms", never, { "formName": { "alias": "formName"; "required": true; "isSignal": true; }; "controls": { "alias": "controls"; "required": true; "isSignal": true; }; }, { "formSubmit": "formSubmit"; }, never, never, true, never>;
+}

package/app/validation-messages/validation-messages.component.d.ts

@@ -0,0 +1,12 @@
+import { AbstractControl, ValidationErrors } from '@angular/forms';
+import { FormControlConfig } from '../formControlConfig';
+import * as i0 from "@angular/core";
+export declare class ValidationMessagesComponent {
+    control: AbstractControl | null;
+    controlName: string;
+    config: FormControlConfig;
+    getValidatorValue(validatorName: keyof ValidationErrors, key: string): any;
+    getCustomErrorMessage(): string | null;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ValidationMessagesComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ValidationMessagesComponent, "validation-messages", never, { "control": { "alias": "control"; "required": false; }; "controlName": { "alias": "controlName"; "required": false; }; "config": { "alias": "config"; "required": false; }; }, {}, never, never, true, never>;
+}