An Angular library for creating dynamic forms from a configuration object. This library is designed to be easy to use and flexible, allowing you to build complex forms with minimal effort.

• Dynamic Form Generation: Create forms on the fly from a simple JSON-like configuration object.
• Wide Range of Input Types: Supports text, password, email, number, date, time, checkbox, radio, file, tel, url, range, color, textarea, and select.
• Built-in Validation: Leverage standard Angular validators to ensure data integrity.
• Conditional Sub-forms: Show or hide parts of a form based on user input.
• Easy Integration: Simple to integrate into any Angular 17+ project.

To install the library, run the following command:

npm install ngx-dynamic-form-17

1. Import the NgxDynamicFormModule:

   In your app.module.ts (or standalone component), import the NgxDynamicFormModule:

   import { NgxDynamicFormModule } from 'ngx-dynamic-form-17';
   
   @NgModule({
       imports: [
           // ...
           NgxDynamicFormModule,
       ],
       // ...
   })
   export class AppModule {}

2. Define your form configuration:

   In your component, create a FormConfig object:

   import { FormConfig } from 'ngx-dynamic-form-17';
   
   export class AppComponent {
       formConfig: FormConfig = {
           fields: [
               {
                   type: 'text',
                   name: 'name',
                   label: 'Name',
                   position: 1,
                   validators: {
                       required: true,
                       minLength: 3,
                   },
               },
               {
                   type: 'email',
                   name: 'email',
                   label: 'Email',
                   position: 2,
                   validators: {
                       required: true,
                       email: true,
                   },
               },
               {
                   type: 'select',
                   name: 'country',
                   label: 'Country',
                   position: 3,
                   options: [
                       { key: 'us', value: 'United States' },
                       { key: 'ca', value: 'Canada' },
                   ],
                   validators: {
                       required: true,
                   },
               },
           ],
       };
   }

3. Use the component in your template:

   <ngx-dynamic-form [config]="formConfig" (formSubmit)="onFormSubmit($event)"></ngx-dynamic-form>

4. Handle the form submission:

   export class AppComponent {
       // ... (formConfig from above)
   
       onFormSubmit(formValue: any) {
           console.log('Form Submitted!', formValue);
       }
   }

The main configuration object for the form.

The configuration for a single field in the form.

An object where the keys are the names of the validators and the values are the validator arguments.

Supported validator keys: required, requiredTrue, minLength, maxLength, min, max, pattern, email, nullValidator.

• @Input() config: FormConfig: The configuration object for the form.
• @Output() formSubmit: EventEmitter<any>: Emits the form value when the form is submitted and valid.

This is a monorepo that contains the ngx-dynamic-form-17 library and a demo application.

1. Clone the repository: git clone https://github.com/mecharan14/ngx-dynamic-form-17.git
2. Install dependencies: npm install

Run the following command to build the library:

ng build ngx-dynamic-form-17

Run the following command to serve the demo application:

ng serve demo-app

The demo app will be available at http://localhost:4200/.

Try the interactive form builder: https://mecharan14.github.io/ngx-dynamic-form-17/

The live demo showcases all the library features including:

• Drag & drop field reordering
• All supported input types
• Advanced validation options
• File upload with validation
• Real-time form preview

Run the following command to run the library's unit tests:

ng test ngx-dynamic-form-17

This project is licensed under the MIT License. See the LICENSE file for details.