Dynamic form component

npm/ng-packs/apps/dev-app/src/app/app.routes.ts

@@ -6,6 +6,10 @@ export const appRoutes: Routes = [
     pathMatch: 'full',
     loadComponent: () => import('./home/home.component').then(m => m.HomeComponent),
   },
+  {
+    path: 'dynamic-form',
+    loadComponent: () => import('./dynamic-form-page/dynamic-form-page.component').then(m => m.DynamicFormPageComponent),
+  },
   {
     path: 'account',
     loadChildren: () => import('@abp/ng.account').then(m => m.createRoutes()),

npm/ng-packs/apps/dev-app/src/app/dynamic-form-page/dynamic-form-page.component.html

@@ -0,0 +1,111 @@
+<div class="container mt-4">
+    <div class="row mb-4">
+        <div class="col-12">
+            <h1 class="display-4">Dynamic Form Showcase</h1>
+            <p class="lead text-muted">
+                Comprehensive example demonstrating all available field types with validation and conditional logic.
+            </p>
+            <hr>
+        </div>
+    </div>
+
+    <div class="row">
+        <div class="col-lg-10 mx-auto">
+            <div class="card shadow-sm">
+                <div class="card-header bg-primary text-white">
+                    <h4 class="mb-0">
+                        <i class="fas fa-wpforms me-2"></i>
+                        User Registration Form
+                    </h4>
+                    <small>All 16 field types + Nested Forms (Group & Array) with full accessibility support</small>
+                </div>
+                <div class="card-body p-4">
+                    @if (formFields.length) {
+                    <abp-dynamic-form 
+                        [fields]="formFields" 
+                        [submitButtonText]="'Register'"
+                        [showCancelButton]="true"
+                        (onSubmit)="submit($event)"
+                        (formCancel)="cancel()" />
+                    } @else {
+                    <div class="text-center py-5">
+                        <div class="spinner-border text-primary" role="status">
+                            <span class="visually-hidden">Loading...</span>
+                        </div>
+                        <p class="mt-3 text-muted">Loading form configuration...</p>
+                    </div>
+                    }
+                </div>
+            </div>
+
+            <!-- Field Types Reference Card -->
+            <div class="card shadow-sm mt-4">
+                <div class="card-header bg-info text-white">
+                    <h5 class="mb-0">
+                        <i class="fas fa-info-circle me-2"></i>
+                        Available Field Types
+                    </h5>
+                </div>
+                <div class="card-body">
+                    <div class="row">
+                        <div class="col-md-6">
+                            <h6 class="text-primary">Text Inputs</h6>
+                            <ul class="list-unstyled">
+                                <li><i class="fas fa-check text-success"></i> Text</li>
+                                <li><i class="fas fa-check text-success"></i> Email</li>
+                                <li><i class="fas fa-check text-success"></i> Password</li>
+                                <li><i class="fas fa-check text-success"></i> Tel</li>
+                                <li><i class="fas fa-check text-success"></i> URL</li>
+                                <li><i class="fas fa-check text-success"></i> Textarea</li>
+                            </ul>
+                        </div>
+                        <div class="col-md-6">
+                            <h6 class="text-primary">Special Inputs</h6>
+                            <ul class="list-unstyled">
+                                <li><i class="fas fa-check text-success"></i> Number</li>
+                                <li><i class="fas fa-check text-success"></i> Date</li>
+                                <li><i class="fas fa-check text-success"></i> DateTime-Local</li>
+                                <li><i class="fas fa-check text-success"></i> Time</li>
+                                <li><i class="fas fa-check text-success"></i> Range</li>
+                                <li><i class="fas fa-check text-success"></i> Color</li>
+                            </ul>
+                        </div>
+                        <div class="col-md-6">
+                            <h6 class="text-primary">Selection</h6>
+                            <ul class="list-unstyled">
+                                <li><i class="fas fa-check text-success"></i> Select (Dropdown)</li>
+                                <li><i class="fas fa-check text-success"></i> Radio</li>
+                                <li><i class="fas fa-check text-success"></i> Checkbox</li>
+                            </ul>
+                        </div>
+                        <div class="col-md-6">
+                            <h6 class="text-primary">Files</h6>
+                            <ul class="list-unstyled">
+                                <li><i class="fas fa-check text-success"></i> File (Single/Multiple)</li>
+                            </ul>
+                        </div>
+                        <div class="col-md-6">
+                            <h6 class="text-primary">Nested Forms</h6>
+                            <ul class="list-unstyled">
+                                <li><i class="fas fa-check text-success"></i> Group (Nested Fields)</li>
+                                <li><i class="fas fa-check text-success"></i> Array (Dynamic List)</li>
+                            </ul>
+                        </div>
+                    </div>
+                    <hr>
+                    <div class="alert alert-info mb-0">
+                        <i class="fas fa-lightbulb me-2"></i>
+                        <strong>Features:</strong> Full validation support, conditional logic, nested forms (groups & arrays),
+                        grid-based layout, ARIA accessibility, keyboard navigation, and screen reader support.
+                    </div>
+                    <hr>
+                    <div class="alert alert-success mb-0">
+                        <i class="fas fa-star me-2"></i>
+                        <strong>New:</strong> Try the nested forms below! Add/remove phone numbers dynamically, 
+                        or fill in your work experience. The Address section shows a grouped form.
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

npm/ng-packs/apps/dev-app/src/app/dynamic-form-page/dynamic-form-page.component.ts

@@ -0,0 +1,38 @@
+import { Component, inject, OnInit, ViewChild } from '@angular/core';
+import { DynamicFormComponent, FormFieldConfig } from '@abp/ng.components/dynamic-form';
+import { FormConfigService } from './form-config.service';
+
+@Component({
+    selector: 'app-dynamic-form-page',
+    templateUrl: './dynamic-form-page.component.html',
+    imports: [DynamicFormComponent],
+})
+export class DynamicFormPageComponent implements OnInit {
+    @ViewChild(DynamicFormComponent, { static: false }) dynamicFormComponent: DynamicFormComponent;
+    protected readonly formConfigService = inject(FormConfigService);
+
+    formFields: FormFieldConfig[] = [];
+
+    ngOnInit() {
+        this.formConfigService.getFormConfig().subscribe(config => {
+            this.formFields = config;
+        });
+    }
+
+    submit(formData: any) {
+        console.log('✅ Form Submitted Successfully!', formData);
+        console.table(formData);
+
+        // Show success message
+        alert('✅ Form submitted successfully! Check the console for details.');
+
+        // Reset form after submission
+        this.dynamicFormComponent.resetForm();
+    }
+
+    cancel() {
+        console.log('❌ Form Cancelled');
+        alert('Form cancelled');
+        this.dynamicFormComponent.resetForm();
+    }
+}