mirror of https://github.com/abpframework/abp.git
sumeyye
9 months ago
committed by
GitHub
GitHub
32 changed files with 2634 additions and 96 deletions
@ -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> |
||||
@ -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(); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,381 @@ |
|||||
|
import { Injectable } from '@angular/core'; |
||||
|
import { FormFieldConfig } from '@abp/ng.components/dynamic-form'; |
||||
|
import { Observable, of } from 'rxjs'; |
||||
|
|
||||
|
@Injectable({ |
||||
|
providedIn: 'root', |
||||
|
}) |
||||
|
export class FormConfigService { |
||||
|
getFormConfig(): Observable<FormFieldConfig[]> { |
||||
|
const formConfig: FormFieldConfig[] = [ |
||||
|
// Section 1: Basic Text Inputs
|
||||
|
{ |
||||
|
key: 'firstName', |
||||
|
label: 'First Name', |
||||
|
type: 'text', |
||||
|
placeholder: 'Enter your first name', |
||||
|
required: true, |
||||
|
gridSize: 6, |
||||
|
order: 1, |
||||
|
validators: [{ type: 'required', message: 'First name is required' }], |
||||
|
}, |
||||
|
{ |
||||
|
key: 'lastName', |
||||
|
label: 'Last Name', |
||||
|
type: 'text', |
||||
|
placeholder: 'Enter your last name', |
||||
|
required: true, |
||||
|
gridSize: 6, |
||||
|
order: 2, |
||||
|
validators: [{ type: 'required', message: 'Last name is required' }], |
||||
|
}, |
||||
|
|
||||
|
// Section 2: Email & Password
|
||||
|
{ |
||||
|
key: 'email', |
||||
|
label: 'Email Address', |
||||
|
type: 'email', |
||||
|
placeholder: 'example@domain.com', |
||||
|
required: true, |
||||
|
gridSize: 6, |
||||
|
order: 3, |
||||
|
validators: [ |
||||
|
{ type: 'required', message: 'Email is required' }, |
||||
|
{ type: 'email', message: 'Invalid email address' }, |
||||
|
], |
||||
|
}, |
||||
|
{ |
||||
|
key: 'password', |
||||
|
label: 'Password', |
||||
|
type: 'password', |
||||
|
placeholder: 'Enter a strong password', |
||||
|
required: true, |
||||
|
gridSize: 6, |
||||
|
order: 4, |
||||
|
minLength: 8, |
||||
|
maxLength: 50, |
||||
|
validators: [ |
||||
|
{ type: 'required', message: 'Password is required' }, |
||||
|
{ type: 'minLength', value: 8, message: 'Password must be at least 8 characters' }, |
||||
|
], |
||||
|
}, |
||||
|
|
||||
|
// Section 3: Contact Information
|
||||
|
{ |
||||
|
key: 'phone', |
||||
|
label: 'Phone Number', |
||||
|
type: 'tel', |
||||
|
placeholder: '555-123-4567', |
||||
|
gridSize: 6, |
||||
|
order: 5, |
||||
|
pattern: '[0-9]{3}-[0-9]{3}-[0-9]{4}', |
||||
|
}, |
||||
|
{ |
||||
|
key: 'website', |
||||
|
label: 'Website', |
||||
|
type: 'url', |
||||
|
placeholder: 'https://example.com', |
||||
|
gridSize: 6, |
||||
|
order: 6, |
||||
|
}, |
||||
|
|
||||
|
// Section 4: Numbers & Dates
|
||||
|
{ |
||||
|
key: 'age', |
||||
|
label: 'Age', |
||||
|
type: 'number', |
||||
|
placeholder: 'Enter your age', |
||||
|
required: true, |
||||
|
gridSize: 4, |
||||
|
order: 7, |
||||
|
min: 18, |
||||
|
max: 100, |
||||
|
validators: [ |
||||
|
{ type: 'required', message: 'Age is required' }, |
||||
|
{ type: 'min', value: 18, message: 'You must be at least 18 years old' }, |
||||
|
], |
||||
|
}, |
||||
|
{ |
||||
|
key: 'birthdate', |
||||
|
label: 'Birth Date', |
||||
|
type: 'date', |
||||
|
required: true, |
||||
|
gridSize: 4, |
||||
|
order: 8, |
||||
|
max: new Date().toISOString().split('T')[0], |
||||
|
validators: [{ type: 'required', message: 'Birth date is required' }], |
||||
|
}, |
||||
|
{ |
||||
|
key: 'appointmentTime', |
||||
|
label: 'Appointment Date & Time', |
||||
|
type: 'datetime-local', |
||||
|
gridSize: 4, |
||||
|
order: 9, |
||||
|
min: new Date().toISOString().slice(0, 16), |
||||
|
}, |
||||
|
|
||||
|
// Section 5: Select & Radio
|
||||
|
{ |
||||
|
key: 'country', |
||||
|
label: 'Country', |
||||
|
type: 'select', |
||||
|
required: true, |
||||
|
gridSize: 6, |
||||
|
order: 10, |
||||
|
options: { |
||||
|
defaultValues: [ |
||||
|
{ key: 'usa', value: 'United States' }, |
||||
|
{ key: 'uk', value: 'United Kingdom' }, |
||||
|
{ key: 'canada', value: 'Canada' }, |
||||
|
{ key: 'germany', value: 'Germany' }, |
||||
|
{ key: 'france', value: 'France' }, |
||||
|
], |
||||
|
}, |
||||
|
validators: [{ type: 'required', message: 'Country is required' }], |
||||
|
}, |
||||
|
{ |
||||
|
key: 'gender', |
||||
|
label: 'Gender', |
||||
|
type: 'radio', |
||||
|
required: true, |
||||
|
gridSize: 6, |
||||
|
order: 11, |
||||
|
options: { |
||||
|
defaultValues: [ |
||||
|
{ key: 'male', value: 'Male' }, |
||||
|
{ key: 'female', value: 'Female' }, |
||||
|
{ key: 'other', value: 'Other' }, |
||||
|
{ key: 'prefer-not-to-say', value: 'Prefer not to say' }, |
||||
|
], |
||||
|
}, |
||||
|
validators: [{ type: 'required', message: 'Gender is required' }], |
||||
|
}, |
||||
|
|
||||
|
// Section 6: Conditional Field (shown when country is USA)
|
||||
|
{ |
||||
|
key: 'state', |
||||
|
label: 'State (USA Only)', |
||||
|
type: 'select', |
||||
|
gridSize: 6, |
||||
|
order: 12, |
||||
|
options: { |
||||
|
defaultValues: [ |
||||
|
{ key: 'ca', value: 'California' }, |
||||
|
{ key: 'ny', value: 'New York' }, |
||||
|
{ key: 'tx', value: 'Texas' }, |
||||
|
{ key: 'fl', value: 'Florida' }, |
||||
|
], |
||||
|
}, |
||||
|
conditionalLogic: [ |
||||
|
{ dependsOn: 'country', condition: 'equals', value: 'usa', action: 'show' }, |
||||
|
], |
||||
|
}, |
||||
|
|
||||
|
// Section 7: Time & Range
|
||||
|
{ |
||||
|
key: 'preferredTime', |
||||
|
label: 'Preferred Contact Time', |
||||
|
type: 'time', |
||||
|
gridSize: 6, |
||||
|
order: 13, |
||||
|
step: '900', // 15 minutes
|
||||
|
}, |
||||
|
{ |
||||
|
key: 'experienceLevel', |
||||
|
label: 'Experience Level (0-10)', |
||||
|
type: 'range', |
||||
|
gridSize: 6, |
||||
|
order: 14, |
||||
|
min: 0, |
||||
|
max: 10, |
||||
|
step: 1, |
||||
|
value: 5, |
||||
|
}, |
||||
|
|
||||
|
// Section 8: Color & File
|
||||
|
{ |
||||
|
key: 'favoriteColor', |
||||
|
label: 'Favorite Color', |
||||
|
type: 'color', |
||||
|
gridSize: 6, |
||||
|
order: 15, |
||||
|
value: '#007bff', |
||||
|
}, |
||||
|
{ |
||||
|
key: 'profilePicture', |
||||
|
label: 'Profile Picture', |
||||
|
type: 'file', |
||||
|
gridSize: 6, |
||||
|
order: 16, |
||||
|
accept: 'image/*', |
||||
|
multiple: false, |
||||
|
}, |
||||
|
|
||||
|
// Section 9: Textarea & Checkbox
|
||||
|
{ |
||||
|
key: 'bio', |
||||
|
label: 'Biography', |
||||
|
type: 'textarea', |
||||
|
placeholder: 'Tell us about yourself...', |
||||
|
gridSize: 12, |
||||
|
order: 17, |
||||
|
maxLength: 500, |
||||
|
}, |
||||
|
{ |
||||
|
key: 'newsletter', |
||||
|
label: 'Subscribe to newsletter', |
||||
|
type: 'checkbox', |
||||
|
gridSize: 6, |
||||
|
order: 18, |
||||
|
}, |
||||
|
{ |
||||
|
key: 'terms', |
||||
|
label: 'I agree to the terms and conditions', |
||||
|
type: 'checkbox', |
||||
|
required: true, |
||||
|
gridSize: 6, |
||||
|
order: 19, |
||||
|
validators: [{ type: 'requiredTrue', message: 'You must agree to the terms' }], |
||||
|
}, |
||||
|
|
||||
|
// Section 10: NESTED FORM - Phone Numbers (Array)
|
||||
|
{ |
||||
|
key: 'phoneNumbers', |
||||
|
type: 'array', |
||||
|
label: 'Phone Numbers', |
||||
|
gridSize: 12, |
||||
|
order: 20, |
||||
|
minItems: 1, |
||||
|
maxItems: 5, |
||||
|
children: [ |
||||
|
{ |
||||
|
key: 'type', |
||||
|
type: 'select', |
||||
|
label: 'Type', |
||||
|
gridSize: 4, |
||||
|
required: true, |
||||
|
options: { |
||||
|
defaultValues: [ |
||||
|
{ key: 'mobile', value: 'Mobile' }, |
||||
|
{ key: 'home', value: 'Home' }, |
||||
|
{ key: 'work', value: 'Work' }, |
||||
|
{ key: 'other', value: 'Other' } |
||||
|
] |
||||
|
}, |
||||
|
validators: [{ type: 'required', message: 'Phone type is required' }], |
||||
|
}, |
||||
|
{ |
||||
|
key: 'number', |
||||
|
type: 'tel', |
||||
|
label: 'Number', |
||||
|
gridSize: 8, |
||||
|
required: true, |
||||
|
placeholder: '555-123-4567', |
||||
|
validators: [{ type: 'required', message: 'Phone number is required' }], |
||||
|
}, |
||||
|
] |
||||
|
}, |
||||
|
|
||||
|
// Section 11: NESTED FORM - Work Experience (Array with nested group)
|
||||
|
{ |
||||
|
key: 'workExperience', |
||||
|
type: 'array', |
||||
|
label: 'Work Experience', |
||||
|
gridSize: 12, |
||||
|
order: 21, |
||||
|
minItems: 0, |
||||
|
maxItems: 10, |
||||
|
children: [ |
||||
|
{ |
||||
|
key: 'company', |
||||
|
type: 'text', |
||||
|
label: 'Company Name', |
||||
|
gridSize: 6, |
||||
|
required: true, |
||||
|
validators: [{ type: 'required', message: 'Company name is required' }], |
||||
|
}, |
||||
|
{ |
||||
|
key: 'position', |
||||
|
type: 'text', |
||||
|
label: 'Position', |
||||
|
gridSize: 6, |
||||
|
required: true, |
||||
|
validators: [{ type: 'required', message: 'Position is required' }], |
||||
|
}, |
||||
|
{ |
||||
|
key: 'startDate', |
||||
|
type: 'date', |
||||
|
label: 'Start Date', |
||||
|
gridSize: 6, |
||||
|
required: true, |
||||
|
validators: [{ type: 'required', message: 'Start date is required' }], |
||||
|
}, |
||||
|
{ |
||||
|
key: 'endDate', |
||||
|
type: 'date', |
||||
|
label: 'End Date', |
||||
|
gridSize: 6, |
||||
|
}, |
||||
|
{ |
||||
|
key: 'currentJob', |
||||
|
type: 'checkbox', |
||||
|
label: 'Currently working here', |
||||
|
gridSize: 12, |
||||
|
}, |
||||
|
{ |
||||
|
key: 'description', |
||||
|
type: 'textarea', |
||||
|
label: 'Job Description', |
||||
|
placeholder: 'Describe your responsibilities...', |
||||
|
gridSize: 12, |
||||
|
maxLength: 500, |
||||
|
}, |
||||
|
] |
||||
|
}, |
||||
|
|
||||
|
// Section 12: NESTED FORM - Address Group (Group type)
|
||||
|
{ |
||||
|
key: 'address', |
||||
|
type: 'group', |
||||
|
label: 'Address Information', |
||||
|
gridSize: 12, |
||||
|
order: 22, |
||||
|
children: [ |
||||
|
{ |
||||
|
key: 'street', |
||||
|
type: 'text', |
||||
|
label: 'Street Address', |
||||
|
gridSize: 8, |
||||
|
placeholder: '123 Main St', |
||||
|
}, |
||||
|
{ |
||||
|
key: 'apartment', |
||||
|
type: 'text', |
||||
|
label: 'Apt/Suite', |
||||
|
gridSize: 4, |
||||
|
placeholder: 'Apt 4B', |
||||
|
}, |
||||
|
{ |
||||
|
key: 'city', |
||||
|
type: 'text', |
||||
|
label: 'City', |
||||
|
gridSize: 6, |
||||
|
required: true, |
||||
|
validators: [{ type: 'required', message: 'City is required' }], |
||||
|
}, |
||||
|
{ |
||||
|
key: 'zipCode', |
||||
|
type: 'text', |
||||
|
label: 'ZIP Code', |
||||
|
gridSize: 6, |
||||
|
required: true, |
||||
|
pattern: '[0-9]{5}', |
||||
|
validators: [{ type: 'required', message: 'ZIP code is required' }], |
||||
|
}, |
||||
|
] |
||||
|
}, |
||||
|
]; |
||||
|
|
||||
|
return of(formConfig); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,73 @@ |
|||||
|
[ |
||||
|
{ |
||||
|
"key": "firstName", |
||||
|
"type": "text", |
||||
|
"label": "First Name", |
||||
|
"placeholder": "Enter first name", |
||||
|
"value": "erdemc", |
||||
|
"required": true, |
||||
|
"validators": [ |
||||
|
{ "type": "required", "message": "First name is required" }, |
||||
|
{ "type": "minLength", "value": 2, "message": "Minimum 2 characters required" } |
||||
|
], |
||||
|
"gridSize": 6, |
||||
|
"order": 1 |
||||
|
}, |
||||
|
{ |
||||
|
"key": "lastName", |
||||
|
"type": "text", |
||||
|
"label": "Last Name", |
||||
|
"placeholder": "Enter last name", |
||||
|
"required": true, |
||||
|
"validators": [{ "type": "required", "message": "Last name is required" }], |
||||
|
"gridSize": 12, |
||||
|
"order": 3 |
||||
|
}, |
||||
|
{ |
||||
|
"key": "email", |
||||
|
"type": "email", |
||||
|
"label": "AbpAccount::EmailAddress", |
||||
|
"placeholder": "Enter email", |
||||
|
"required": true, |
||||
|
"validators": [ |
||||
|
{ "type": "required", "message": "Email is required" }, |
||||
|
{ "type": "email", "message": "Please enter a valid email" } |
||||
|
], |
||||
|
"gridSize": 6, |
||||
|
"order": 2 |
||||
|
}, |
||||
|
{ |
||||
|
"key": "userType", |
||||
|
"type": "select", |
||||
|
"label": "User Type", |
||||
|
"required": true, |
||||
|
"options": [ |
||||
|
{ "key": "admin", "value": "Administrator" }, |
||||
|
{ "key": "user", "value": "Regular User" }, |
||||
|
{ "key": "guest", "value": "Guest User" } |
||||
|
], |
||||
|
"validators": [{ "type": "required", "message": "Please select user type" }], |
||||
|
"order": 4 |
||||
|
}, |
||||
|
{ |
||||
|
"key": "adminNotes", |
||||
|
"type": "textarea", |
||||
|
"label": "Admin Notes", |
||||
|
"placeholder": "Enter admin-specific notes", |
||||
|
"conditionalLogic": [ |
||||
|
{ |
||||
|
"dependsOn": "userType", |
||||
|
"condition": "equals", |
||||
|
"value": "admin", |
||||
|
"action": "show" |
||||
|
} |
||||
|
], |
||||
|
"order": 5 |
||||
|
}, |
||||
|
{ |
||||
|
"key": "isSelected", |
||||
|
"type": "checkbox", |
||||
|
"label": "Is Selected", |
||||
|
"order": 6 |
||||
|
} |
||||
|
] |
||||
@ -0,0 +1,338 @@ |
|||||
|
# Nested Forms Guide |
||||
|
|
||||
|
## Overview |
||||
|
|
||||
|
Dynamic Form now supports **nested forms** with two new field types: |
||||
|
- **`group`** - Group related fields together |
||||
|
- **`array`** - Dynamic lists with add/remove functionality |
||||
|
|
||||
|
## Quick Start |
||||
|
|
||||
|
### 1. Group Type (Nested Fields) |
||||
|
|
||||
|
Group related fields together with visual hierarchy: |
||||
|
|
||||
|
```typescript |
||||
|
{ |
||||
|
key: 'address', |
||||
|
type: 'group', |
||||
|
label: 'Address Information', |
||||
|
gridSize: 12, |
||||
|
children: [ |
||||
|
{ |
||||
|
key: 'street', |
||||
|
type: 'text', |
||||
|
label: 'Street', |
||||
|
gridSize: 8 |
||||
|
}, |
||||
|
{ |
||||
|
key: 'city', |
||||
|
type: 'text', |
||||
|
label: 'City', |
||||
|
gridSize: 4 |
||||
|
}, |
||||
|
{ |
||||
|
key: 'zipCode', |
||||
|
type: 'text', |
||||
|
label: 'ZIP Code', |
||||
|
gridSize: 6 |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
**Output:** |
||||
|
```json |
||||
|
{ |
||||
|
"address": { |
||||
|
"street": "123 Main St", |
||||
|
"city": "New York", |
||||
|
"zipCode": "10001" |
||||
|
} |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
### 2. Array Type (Dynamic Lists) |
||||
|
|
||||
|
Create dynamic lists with add/remove buttons: |
||||
|
|
||||
|
```typescript |
||||
|
{ |
||||
|
key: 'phoneNumbers', |
||||
|
type: 'array', |
||||
|
label: 'Phone Numbers', |
||||
|
minItems: 1, |
||||
|
maxItems: 5, |
||||
|
gridSize: 12, |
||||
|
children: [ |
||||
|
{ |
||||
|
key: 'type', |
||||
|
type: 'select', |
||||
|
label: 'Type', |
||||
|
gridSize: 4, |
||||
|
options: { |
||||
|
defaultValues: [ |
||||
|
{ key: 'mobile', value: 'Mobile' }, |
||||
|
{ key: 'home', value: 'Home' }, |
||||
|
{ key: 'work', value: 'Work' } |
||||
|
] |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
key: 'number', |
||||
|
type: 'tel', |
||||
|
label: 'Number', |
||||
|
gridSize: 8 |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
**Output:** |
||||
|
```json |
||||
|
{ |
||||
|
"phoneNumbers": [ |
||||
|
{ "type": "mobile", "number": "555-1234" }, |
||||
|
{ "type": "work", "number": "555-5678" } |
||||
|
] |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
## Features |
||||
|
|
||||
|
### Array Features |
||||
|
- ✅ **Add Button** - Adds new item (respects maxItems) |
||||
|
- ✅ **Remove Button** - Removes item (respects minItems) |
||||
|
- ✅ **Item Counter** - Shows current count and limits |
||||
|
- ✅ **Item Labels** - "Phone Number #1", "Phone Number #2" |
||||
|
- ✅ **Min/Max Validation** - Buttons automatically disabled |
||||
|
- ✅ **Empty State** - Shows info message when no items |
||||
|
|
||||
|
### Group Features |
||||
|
- ✅ **Visual Hierarchy** - Border and background styling |
||||
|
- ✅ **Legend Label** - Fieldset with legend for accessibility |
||||
|
- ✅ **Grid Support** - All children support gridSize |
||||
|
- ✅ **Nested Groups** - Groups inside groups supported |
||||
|
|
||||
|
### Recursive Support |
||||
|
- ✅ **Array in Array** - Phone numbers can have sub-arrays |
||||
|
- ✅ **Group in Array** - Work experience can have grouped fields |
||||
|
- ✅ **Array in Group** - Address can have multiple phone numbers |
||||
|
- ✅ **Unlimited Nesting** - No depth limit |
||||
|
|
||||
|
## Advanced Examples |
||||
|
|
||||
|
### Complex Nested Structure |
||||
|
|
||||
|
```typescript |
||||
|
{ |
||||
|
key: 'workExperience', |
||||
|
type: 'array', |
||||
|
label: 'Work Experience', |
||||
|
minItems: 0, |
||||
|
maxItems: 10, |
||||
|
children: [ |
||||
|
{ |
||||
|
key: 'company', |
||||
|
type: 'text', |
||||
|
label: 'Company Name', |
||||
|
gridSize: 6, |
||||
|
required: true |
||||
|
}, |
||||
|
{ |
||||
|
key: 'position', |
||||
|
type: 'text', |
||||
|
label: 'Position', |
||||
|
gridSize: 6, |
||||
|
required: true |
||||
|
}, |
||||
|
{ |
||||
|
key: 'dates', |
||||
|
type: 'group', // Nested group inside array |
||||
|
label: 'Employment Dates', |
||||
|
gridSize: 12, |
||||
|
children: [ |
||||
|
{ |
||||
|
key: 'startDate', |
||||
|
type: 'date', |
||||
|
label: 'Start Date', |
||||
|
gridSize: 6 |
||||
|
}, |
||||
|
{ |
||||
|
key: 'endDate', |
||||
|
type: 'date', |
||||
|
label: 'End Date', |
||||
|
gridSize: 6 |
||||
|
} |
||||
|
] |
||||
|
}, |
||||
|
{ |
||||
|
key: 'description', |
||||
|
type: 'textarea', |
||||
|
label: 'Description', |
||||
|
gridSize: 12 |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
## API Reference |
||||
|
|
||||
|
### FormFieldConfig (Extended) |
||||
|
|
||||
|
```typescript |
||||
|
interface FormFieldConfig { |
||||
|
// ... existing properties |
||||
|
|
||||
|
// NEW: Nested form properties |
||||
|
children?: FormFieldConfig[]; // Child fields for group/array types |
||||
|
minItems?: number; // Minimum items for array (default: 0) |
||||
|
maxItems?: number; // Maximum items for array (default: unlimited) |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
### New Components |
||||
|
|
||||
|
#### DynamicFormGroupComponent |
||||
|
```typescript |
||||
|
@Input() groupConfig: FormFieldConfig; |
||||
|
@Input() formGroup: FormGroup; |
||||
|
@Input() visible: boolean = true; |
||||
|
``` |
||||
|
|
||||
|
#### DynamicFormArrayComponent |
||||
|
```typescript |
||||
|
@Input() arrayConfig: FormFieldConfig; |
||||
|
@Input() formGroup: FormGroup; |
||||
|
@Input() visible: boolean = true; |
||||
|
|
||||
|
addItem(): void; // Add new item to array |
||||
|
removeItem(index): void; // Remove item from array |
||||
|
``` |
||||
|
|
||||
|
## Styling |
||||
|
|
||||
|
### Group Styling |
||||
|
|
||||
|
```scss |
||||
|
.form-group-container { |
||||
|
border-left: 3px solid var(--bs-primary); |
||||
|
padding: 1rem; |
||||
|
background-color: var(--bs-light); |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
### Array Styling |
||||
|
|
||||
|
```scss |
||||
|
.array-item { |
||||
|
border: 1px solid var(--bs-border-color); |
||||
|
padding: 1rem; |
||||
|
margin-bottom: 1rem; |
||||
|
background: white; |
||||
|
|
||||
|
&:hover { |
||||
|
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); |
||||
|
} |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
## Accessibility |
||||
|
|
||||
|
All nested forms include: |
||||
|
- ✅ **ARIA roles** (`role="group"`, `role="list"`, `role="listitem"`) |
||||
|
- ✅ **ARIA labels** (`aria-label`, `aria-labelledby`) |
||||
|
- ✅ **Live regions** (`aria-live="polite"` for item count) |
||||
|
- ✅ **Semantic HTML** (`<fieldset>`, `<legend>`) |
||||
|
- ✅ **Keyboard navigation** (Tab, Enter, Space) |
||||
|
- ✅ **Screen reader announcements** |
||||
|
|
||||
|
## Migration Guide |
||||
|
|
||||
|
### From Simple to Nested |
||||
|
|
||||
|
**Before:** |
||||
|
```typescript |
||||
|
{ |
||||
|
key: 'street', |
||||
|
type: 'text', |
||||
|
label: 'Street' |
||||
|
}, |
||||
|
{ |
||||
|
key: 'city', |
||||
|
type: 'text', |
||||
|
label: 'City' |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
**After:** |
||||
|
```typescript |
||||
|
{ |
||||
|
key: 'address', |
||||
|
type: 'group', |
||||
|
label: 'Address', |
||||
|
children: [ |
||||
|
{ key: 'street', type: 'text', label: 'Street' }, |
||||
|
{ key: 'city', type: 'text', label: 'City' } |
||||
|
] |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
### Data Structure Change |
||||
|
|
||||
|
**Before:** |
||||
|
```json |
||||
|
{ |
||||
|
"street": "123 Main St", |
||||
|
"city": "New York" |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
**After:** |
||||
|
```json |
||||
|
{ |
||||
|
"address": { |
||||
|
"street": "123 Main St", |
||||
|
"city": "New York" |
||||
|
} |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
## Best Practices |
||||
|
|
||||
|
1. **Use Groups** for logical field grouping (address, contact info) |
||||
|
2. **Use Arrays** for dynamic lists (phone numbers, work history) |
||||
|
3. **Set minItems/maxItems** to prevent empty or excessive arrays |
||||
|
4. **Use gridSize** for responsive layouts within nested forms |
||||
|
5. **Keep nesting shallow** (max 2-3 levels for UX) |
||||
|
6. **Add validation** to required nested fields |
||||
|
7. **Use meaningful labels** for array items |
||||
|
|
||||
|
## Examples |
||||
|
|
||||
|
See `apps/dev-app/src/app/dynamic-form-page` for complete examples: |
||||
|
- Phone Numbers (simple array) |
||||
|
- Work Experience (complex array) |
||||
|
- Address (group) |
||||
|
|
||||
|
## Troubleshooting |
||||
|
|
||||
|
### Array items not showing |
||||
|
- Check `minItems` - may need to be > 0 |
||||
|
- Verify `children` array is not empty |
||||
|
|
||||
|
### Can't add items |
||||
|
- Check `maxItems` limit |
||||
|
- Verify button is not disabled |
||||
|
|
||||
|
### Form data not nested |
||||
|
- Confirm `type: 'group'` or `type: 'array'` |
||||
|
- Check FormGroup structure in component |
||||
|
|
||||
|
## Performance |
||||
|
|
||||
|
- ✅ **OnPush** change detection |
||||
|
- ✅ **TrackBy** functions for arrays |
||||
|
- ✅ **Lazy rendering** for conditional fields |
||||
|
- ✅ **Minimal re-renders** on add/remove |
||||
|
|
||||
@ -0,0 +1,6 @@ |
|||||
|
{ |
||||
|
"$schema": "../../../node_modules/ng-packagr/ng-entrypoint.schema.json", |
||||
|
"lib": { |
||||
|
"entryFile": "src/public-api.ts" |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,93 @@ |
|||||
|
@if (visible()) { |
||||
|
<div class="form-array-container" role="region" [attr.aria-label]="arrayConfig().label | abpLocalization"> |
||||
|
|
||||
|
<!-- Header with Add Button --> |
||||
|
<div class="array-header d-flex justify-content-between align-items-center mb-3"> |
||||
|
<label class="form-array-label"> |
||||
|
{{ arrayConfig().label | abpLocalization }} |
||||
|
@if (arrayConfig().required) { |
||||
|
<span class="text-danger" aria-label="required">*</span> |
||||
|
} |
||||
|
</label> |
||||
|
<button |
||||
|
type="button" |
||||
|
class="btn btn-sm btn-primary" |
||||
|
(click)="addItem()" |
||||
|
[disabled]="!canAddItem" |
||||
|
[attr.aria-label]="'Add ' + (arrayConfig().label | abpLocalization)"> |
||||
|
<i class="fa fa-plus me-1"></i> |
||||
|
{{ '::Add' | abpLocalization }} |
||||
|
</button> |
||||
|
</div> |
||||
|
|
||||
|
<!-- Array Items --> |
||||
|
<div class="array-items" role="list"> |
||||
|
@for (item of formArray.controls; track trackByIndex($index)) { |
||||
|
<div class="array-item border rounded p-3 mb-3" role="listitem" [formGroup]="getItemFormGroup($index)"> |
||||
|
|
||||
|
<!-- Item Header --> |
||||
|
<div class="item-header d-flex justify-content-between align-items-center mb-3"> |
||||
|
<strong class="item-title"> |
||||
|
{{ arrayConfig().label | abpLocalization }} #{{ $index + 1 }} |
||||
|
</strong> |
||||
|
<button |
||||
|
type="button" |
||||
|
class="btn btn-sm btn-danger" |
||||
|
(click)="removeItem($index)" |
||||
|
[disabled]="!canRemoveItem" |
||||
|
[attr.aria-label]="'Remove ' + (arrayConfig().label | abpLocalization) + ' #' + ($index + 1)"> |
||||
|
<i class="fa fa-trash me-1"></i> |
||||
|
{{ '::Remove' | abpLocalization }} |
||||
|
</button> |
||||
|
</div> |
||||
|
|
||||
|
<!-- Item Fields --> |
||||
|
<div class="row"> |
||||
|
@for (field of sortedChildren; track field.key) { |
||||
|
<div [ngClass]="'col-md-' + (field.gridSize || 12)"> |
||||
|
|
||||
|
<!-- Nested Group --> |
||||
|
@if (field.type === 'group') { |
||||
|
<abp-dynamic-form-group |
||||
|
[groupConfig]="field" |
||||
|
[formGroup]="getNestedFormGroup($index, field.key)" /> |
||||
|
} |
||||
|
|
||||
|
<!-- Nested Array (recursive) --> |
||||
|
@else if (field.type === 'array') { |
||||
|
<abp-dynamic-form-array |
||||
|
[arrayConfig]="field" |
||||
|
[formGroup]="getItemFormGroup($index)" /> |
||||
|
} |
||||
|
|
||||
|
<!-- Regular Field --> |
||||
|
@else { |
||||
|
<abp-dynamic-form-field |
||||
|
[field]="field" |
||||
|
[formControlName]="field.key" /> |
||||
|
} |
||||
|
|
||||
|
</div> |
||||
|
} |
||||
|
</div> |
||||
|
</div> |
||||
|
} @empty { |
||||
|
<div class="alert alert-info" role="status"> |
||||
|
<i class="fa fa-info-circle me-2"></i> |
||||
|
{{ '::NoItemsAdded' | abpLocalization }} |
||||
|
</div> |
||||
|
} |
||||
|
</div> |
||||
|
|
||||
|
<!-- Item Count --> |
||||
|
<div class="array-footer text-muted small" aria-live="polite" aria-atomic="true"> |
||||
|
{{ formArray.length }} {{ '::Items' | abpLocalization }} |
||||
|
@if (arrayConfig().minItems) { |
||||
|
({{ '::Min' | abpLocalization }}: {{ arrayConfig().minItems }}) |
||||
|
} |
||||
|
@if (arrayConfig().maxItems) { |
||||
|
({{ '::Max' | abpLocalization }}: {{ arrayConfig().maxItems }}) |
||||
|
} |
||||
|
</div> |
||||
|
</div> |
||||
|
} |
||||
@ -0,0 +1,75 @@ |
|||||
|
.form-array-container { |
||||
|
margin-bottom: 1.5rem; |
||||
|
} |
||||
|
|
||||
|
.array-header { |
||||
|
border-bottom: 2px solid var(--bs-primary, #007bff); |
||||
|
padding-bottom: 0.5rem; |
||||
|
} |
||||
|
|
||||
|
.form-array-label { |
||||
|
font-size: 1.1rem; |
||||
|
font-weight: 600; |
||||
|
color: var(--bs-dark, #212529); |
||||
|
margin-bottom: 0; |
||||
|
} |
||||
|
|
||||
|
.array-items { |
||||
|
margin-top: 1rem; |
||||
|
} |
||||
|
|
||||
|
.array-item { |
||||
|
background-color: var(--bs-white, #fff); |
||||
|
transition: all 0.2s ease; |
||||
|
position: relative; |
||||
|
|
||||
|
&:hover { |
||||
|
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); |
||||
|
transform: translateY(-1px); |
||||
|
} |
||||
|
|
||||
|
// Nested arrays get lighter background |
||||
|
.array-item { |
||||
|
background-color: var(--bs-light, #f8f9fa); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.item-header { |
||||
|
border-bottom: 1px solid var(--bs-border-color, #dee2e6); |
||||
|
padding-bottom: 0.75rem; |
||||
|
} |
||||
|
|
||||
|
.item-title { |
||||
|
color: var(--bs-primary, #007bff); |
||||
|
font-size: 0.95rem; |
||||
|
} |
||||
|
|
||||
|
.array-footer { |
||||
|
margin-top: 0.5rem; |
||||
|
padding-top: 0.5rem; |
||||
|
border-top: 1px solid var(--bs-border-color, #dee2e6); |
||||
|
} |
||||
|
|
||||
|
// Accessibility: Focus styles for buttons |
||||
|
button { |
||||
|
&:focus-visible { |
||||
|
outline: 2px solid var(--bs-primary, #007bff); |
||||
|
outline-offset: 2px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// Animation for add/remove |
||||
|
@keyframes slideIn { |
||||
|
from { |
||||
|
opacity: 0; |
||||
|
transform: translateY(-10px); |
||||
|
} |
||||
|
to { |
||||
|
opacity: 1; |
||||
|
transform: translateY(0); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.array-item { |
||||
|
animation: slideIn 0.3s ease; |
||||
|
} |
||||
@ -0,0 +1,88 @@ |
|||||
|
import { |
||||
|
ChangeDetectionStrategy, |
||||
|
Component, |
||||
|
input, |
||||
|
inject, |
||||
|
ChangeDetectorRef, |
||||
|
forwardRef, |
||||
|
} from '@angular/core'; |
||||
|
import { FormGroup, FormArray, FormBuilder, ReactiveFormsModule } from '@angular/forms'; |
||||
|
import { CommonModule } from '@angular/common'; |
||||
|
import { FormFieldConfig } from '../dynamic-form.models'; |
||||
|
import { DynamicFormService } from '../dynamic-form.service'; |
||||
|
import { LocalizationPipe } from '@abp/ng.core'; |
||||
|
import { DynamicFormFieldComponent } from '../dynamic-form-field'; |
||||
|
import { DynamicFormGroupComponent } from '../dynamic-form-group'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'abp-dynamic-form-array', |
||||
|
templateUrl: './dynamic-form-array.component.html', |
||||
|
styleUrls: ['./dynamic-form-array.component.scss'], |
||||
|
changeDetection: ChangeDetectionStrategy.OnPush, |
||||
|
imports: [ |
||||
|
CommonModule, |
||||
|
ReactiveFormsModule, |
||||
|
LocalizationPipe, |
||||
|
DynamicFormFieldComponent, |
||||
|
DynamicFormGroupComponent, |
||||
|
forwardRef(() => DynamicFormArrayComponent), // Self reference for recursion
|
||||
|
], |
||||
|
}) |
||||
|
export class DynamicFormArrayComponent { |
||||
|
arrayConfig = input.required<FormFieldConfig>(); |
||||
|
formGroup = input.required<FormGroup>(); |
||||
|
visible = input<boolean>(true); |
||||
|
|
||||
|
private fb = inject(FormBuilder); |
||||
|
private dynamicFormService = inject(DynamicFormService); |
||||
|
private cdr = inject(ChangeDetectorRef); |
||||
|
|
||||
|
get formArray(): FormArray { |
||||
|
return this.formGroup().get(this.arrayConfig().key) as FormArray; |
||||
|
} |
||||
|
|
||||
|
get sortedChildren(): FormFieldConfig[] { |
||||
|
const children = this.arrayConfig().children || []; |
||||
|
return children.sort((a, b) => (a.order || 0) - (b.order || 0)); |
||||
|
} |
||||
|
|
||||
|
get canAddItem(): boolean { |
||||
|
const maxItems = this.arrayConfig().maxItems; |
||||
|
return maxItems ? this.formArray.length < maxItems : true; |
||||
|
} |
||||
|
|
||||
|
get canRemoveItem(): boolean { |
||||
|
const minItems = this.arrayConfig().minItems || 0; |
||||
|
return this.formArray.length > minItems; |
||||
|
} |
||||
|
|
||||
|
addItem() { |
||||
|
if (!this.canAddItem) return; |
||||
|
|
||||
|
const itemGroup = this.dynamicFormService.createFormGroup( |
||||
|
this.arrayConfig().children || [] |
||||
|
); |
||||
|
|
||||
|
this.formArray.push(itemGroup); |
||||
|
this.cdr.markForCheck(); |
||||
|
} |
||||
|
|
||||
|
removeItem(index: number) { |
||||
|
if (!this.canRemoveItem) return; |
||||
|
|
||||
|
this.formArray.removeAt(index); |
||||
|
this.cdr.markForCheck(); |
||||
|
} |
||||
|
|
||||
|
getItemFormGroup(index: number): FormGroup { |
||||
|
return this.formArray.at(index) as FormGroup; |
||||
|
} |
||||
|
|
||||
|
getNestedFormGroup(index: number, key: string): FormGroup { |
||||
|
return this.getItemFormGroup(index).get(key) as FormGroup; |
||||
|
} |
||||
|
|
||||
|
trackByIndex(index: number): number { |
||||
|
return index; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1 @@ |
|||||
|
export * from './dynamic-form-array.component'; |
||||
@ -0,0 +1,135 @@ |
|||||
|
import { |
||||
|
Component, |
||||
|
ViewChild, |
||||
|
ViewContainerRef, |
||||
|
ChangeDetectionStrategy, |
||||
|
forwardRef, |
||||
|
Type, |
||||
|
effect, |
||||
|
DestroyRef, |
||||
|
inject, |
||||
|
input, |
||||
|
} from '@angular/core'; |
||||
|
import { |
||||
|
ControlValueAccessor, NG_VALUE_ACCESSOR, FormControl, ReactiveFormsModule |
||||
|
} from '@angular/forms'; |
||||
|
import { CommonModule } from '@angular/common'; |
||||
|
import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; |
||||
|
|
||||
|
type controlValueAccessorLike = Partial<ControlValueAccessor> & { setDisabledState?(d: boolean): void }; |
||||
|
type acceptsFormControl = { formControl?: FormControl }; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'abp-dynamic-form-field-host', |
||||
|
imports: [CommonModule, ReactiveFormsModule], |
||||
|
template: `<ng-template #vcRef></ng-template>`, |
||||
|
changeDetection: ChangeDetectionStrategy.OnPush, |
||||
|
providers: [{ |
||||
|
provide: NG_VALUE_ACCESSOR, |
||||
|
useExisting: forwardRef(() => DynamicFieldHostComponent), |
||||
|
multi: true |
||||
|
}] |
||||
|
}) |
||||
|
export class DynamicFieldHostComponent implements ControlValueAccessor { |
||||
|
component = input<Type<ControlValueAccessor>>(); |
||||
|
inputs = input<Record<string, any>>({}); |
||||
|
|
||||
|
@ViewChild('vcRef', { read: ViewContainerRef, static: true }) viewContainerRef!: ViewContainerRef; |
||||
|
private componentRef?: any; |
||||
|
|
||||
|
private value: any; |
||||
|
private disabled = false; |
||||
|
|
||||
|
// if child has not implemented ControlValueAccessor. Create form control
|
||||
|
private innerControl = new FormControl<any>(null); |
||||
|
readonly destroyRef = inject(DestroyRef); |
||||
|
|
||||
|
constructor() { |
||||
|
effect(() => { |
||||
|
if (this.component()) { |
||||
|
this.createChild(); |
||||
|
} else if (this.componentRef && this.inputs()) { |
||||
|
this.applyInputs(); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
private createChild() { |
||||
|
this.viewContainerRef.clear(); |
||||
|
if (!this.component()) return; |
||||
|
|
||||
|
this.componentRef = this.viewContainerRef.createComponent(this.component()); |
||||
|
this.applyInputs(); |
||||
|
|
||||
|
const instance: any = this.componentRef.instance as controlValueAccessorLike & acceptsFormControl; |
||||
|
|
||||
|
if (this.isCVA(instance)) { |
||||
|
// Child CVA ise wrapper -> child delege
|
||||
|
instance.registerOnChange?.((v: any) => this.onChange(v)); |
||||
|
instance.registerOnTouched?.(() => this.onTouched()); |
||||
|
if (this.disabled && instance.setDisabledState) { |
||||
|
instance.setDisabledState(true); |
||||
|
} |
||||
|
// set initial value
|
||||
|
if (this.value !== undefined) { |
||||
|
instance.writeValue?.(this.value); |
||||
|
} |
||||
|
} else { |
||||
|
// No CVA -> use form control
|
||||
|
if ('formControl' in instance) { |
||||
|
instance.formControl = this.innerControl; |
||||
|
// apply initial value/disabled state
|
||||
|
if (this.value !== undefined) { |
||||
|
this.innerControl.setValue(this.value, { emitEvent: false }); |
||||
|
} |
||||
|
this.innerControl.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(v => this.onChange(v)); |
||||
|
this.innerControl.disabled ? null : (this.disabled && this.innerControl.disable({ emitEvent: false })); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
private applyInputs() { |
||||
|
if (!this.componentRef) return; |
||||
|
const inst = this.componentRef.instance; |
||||
|
for (const [k, v] of Object.entries(this.inputs ?? {})) { |
||||
|
inst[k] = v; |
||||
|
} |
||||
|
this.componentRef.changeDetectorRef?.markForCheck?.(); |
||||
|
} |
||||
|
|
||||
|
private isCVA(obj: any): obj is controlValueAccessorLike { |
||||
|
return obj && typeof obj.writeValue === 'function' && typeof obj.registerOnChange === 'function'; |
||||
|
} |
||||
|
|
||||
|
writeValue(obj: any): void { |
||||
|
this.value = obj; |
||||
|
if (!this.componentRef) return; |
||||
|
|
||||
|
const inst: any = this.componentRef.instance as controlValueAccessorLike & acceptsFormControl; |
||||
|
|
||||
|
if (this.isCVA(inst)) { |
||||
|
inst.writeValue?.(obj); |
||||
|
} else if ('formControl' in inst && inst.formControl instanceof FormControl) { |
||||
|
inst.formControl.setValue(obj, { emitEvent: false }); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
private onChange: (v: any) => void = () => {}; |
||||
|
private onTouched: () => void = () => {}; |
||||
|
|
||||
|
registerOnChange(fn: any): void { this.onChange = fn; } |
||||
|
registerOnTouched(fn: any): void { this.onTouched = fn; } |
||||
|
|
||||
|
setDisabledState(isDisabled: boolean): void { |
||||
|
this.disabled = isDisabled; |
||||
|
if (!this.componentRef) return; |
||||
|
|
||||
|
const inst = this.componentRef.instance as controlValueAccessorLike & acceptsFormControl; |
||||
|
|
||||
|
if (this.isCVA(inst) && inst.setDisabledState) { |
||||
|
inst.setDisabledState(isDisabled); |
||||
|
} else if ('formControl' in inst && inst.formControl instanceof FormControl) { |
||||
|
isDisabled ? inst.formControl.disable({ emitEvent: false }) : inst.formControl.enable({ emitEvent: false }); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,371 @@ |
|||||
|
@if (visible()) { |
||||
|
<div [formGroup]="fieldFormGroup" role="group" [attr.aria-labelledby]="fieldId + '-label'"> |
||||
|
|
||||
|
<!-- NOTE: Group and Array types are NOT rendered here, they should be rendered at parent level --> |
||||
|
<!-- This component only handles leaf/primitive field types --> |
||||
|
|
||||
|
@if (field().type === 'text') { |
||||
|
<!-- Text Input --> |
||||
|
<div class="form-group mb-3"> |
||||
|
<ng-container [ngTemplateOutlet]="labelTemplate" /> |
||||
|
<input |
||||
|
[id]="fieldId" |
||||
|
[placeholder]="(field().placeholder || '') | abpLocalization" |
||||
|
formControlName="value" |
||||
|
[class.is-invalid]="isInvalid" |
||||
|
class="form-control" |
||||
|
[attr.aria-required]="field().required || null" |
||||
|
[attr.aria-invalid]="isInvalid || null" |
||||
|
[attr.aria-describedby]="isInvalid ? errorId : null" |
||||
|
[attr.aria-label]="field().label | abpLocalization"> |
||||
|
@if (isInvalid) { |
||||
|
<ng-container [ngTemplateOutlet]="errorTemplate" /> |
||||
|
} |
||||
|
</div> |
||||
|
} @else if (field().type === 'select') { |
||||
|
<!-- Select Dropdown --> |
||||
|
<div class="form-group mb-3"> |
||||
|
<ng-container [ngTemplateOutlet]="labelTemplate" /> |
||||
|
<select |
||||
|
[id]="fieldId" |
||||
|
formControlName="value" |
||||
|
[class.is-invalid]="isInvalid" |
||||
|
class="form-control" |
||||
|
[attr.aria-required]="field().required || null" |
||||
|
[attr.aria-invalid]="isInvalid || null" |
||||
|
[attr.aria-describedby]="isInvalid ? errorId : null" |
||||
|
[attr.aria-label]="field().label | abpLocalization"> |
||||
|
<option value="">{{ '::Select' | abpLocalization }}</option> |
||||
|
@for (option of options$ | async; track option.key) { |
||||
|
<option [value]="option.key"> |
||||
|
{{ option.value | abpLocalization }} |
||||
|
</option> |
||||
|
} |
||||
|
</select> |
||||
|
@if (isInvalid) { |
||||
|
<ng-container [ngTemplateOutlet]="errorTemplate" /> |
||||
|
} |
||||
|
</div> |
||||
|
} @else if (field().type === 'checkbox') { |
||||
|
<!-- Checkbox --> |
||||
|
<div class="form-group form-check mb-3" role="group"> |
||||
|
<abp-checkbox |
||||
|
[label]="field().label | abpLocalization" |
||||
|
formControlName="value" |
||||
|
[id]="fieldId" |
||||
|
[attr.aria-required]="field().required || null" |
||||
|
[attr.aria-invalid]="isInvalid || null" |
||||
|
[attr.aria-describedby]="isInvalid ? errorId : null" /> |
||||
|
@if (isInvalid) { |
||||
|
<ng-container [ngTemplateOutlet]="errorTemplate" /> |
||||
|
} |
||||
|
</div> |
||||
|
} @else if (field().type === 'email') { |
||||
|
<!-- Email Input --> |
||||
|
<div class="form-group mb-3"> |
||||
|
<ng-container [ngTemplateOutlet]="labelTemplate" /> |
||||
|
<input |
||||
|
type="email" |
||||
|
[id]="fieldId" |
||||
|
formControlName="value" |
||||
|
[placeholder]="(field().placeholder || '') | abpLocalization" |
||||
|
[class.is-invalid]="isInvalid" |
||||
|
class="form-control" |
||||
|
[attr.aria-required]="field().required || null" |
||||
|
[attr.aria-invalid]="isInvalid || null" |
||||
|
[attr.aria-describedby]="isInvalid ? errorId : null" |
||||
|
[attr.aria-label]="field().label | abpLocalization" |
||||
|
autocomplete="email"> |
||||
|
@if (isInvalid) { |
||||
|
<ng-container [ngTemplateOutlet]="errorTemplate" /> |
||||
|
} |
||||
|
</div> |
||||
|
} @else if (field().type === 'textarea') { |
||||
|
<!-- Textarea --> |
||||
|
<div class="form-group mb-3"> |
||||
|
<ng-container [ngTemplateOutlet]="labelTemplate" /> |
||||
|
<textarea |
||||
|
[id]="fieldId" |
||||
|
formControlName="value" |
||||
|
[placeholder]="(field().placeholder || '') | abpLocalization" |
||||
|
[class.is-invalid]="isInvalid" |
||||
|
rows="4" |
||||
|
class="form-control" |
||||
|
[attr.aria-required]="field().required || null" |
||||
|
[attr.aria-invalid]="isInvalid || null" |
||||
|
[attr.aria-describedby]="isInvalid ? errorId : null" |
||||
|
[attr.aria-label]="field().label | abpLocalization"> |
||||
|
</textarea> |
||||
|
@if (isInvalid) { |
||||
|
<ng-container [ngTemplateOutlet]="errorTemplate" /> |
||||
|
} |
||||
|
</div> |
||||
|
} @else if (field().type === 'number') { |
||||
|
<!-- Number Input --> |
||||
|
<div class="form-group mb-3"> |
||||
|
<ng-container [ngTemplateOutlet]="labelTemplate" /> |
||||
|
<input |
||||
|
type="number" |
||||
|
[id]="fieldId" |
||||
|
formControlName="value" |
||||
|
[placeholder]="(field().placeholder || '') | abpLocalization" |
||||
|
[class.is-invalid]="isInvalid" |
||||
|
class="form-control" |
||||
|
[attr.min]="field().min || null" |
||||
|
[attr.max]="field().max || null" |
||||
|
[attr.step]="field().step || null" |
||||
|
[attr.aria-required]="field().required || null" |
||||
|
[attr.aria-invalid]="isInvalid || null" |
||||
|
[attr.aria-describedby]="isInvalid ? errorId : null" |
||||
|
[attr.aria-label]="field().label | abpLocalization"> |
||||
|
@if (isInvalid) { |
||||
|
<ng-container [ngTemplateOutlet]="errorTemplate" /> |
||||
|
} |
||||
|
</div> |
||||
|
} @else if (field().type === 'date') { |
||||
|
<!-- Date Input --> |
||||
|
<div class="form-group mb-3"> |
||||
|
<ng-container [ngTemplateOutlet]="labelTemplate" /> |
||||
|
<input |
||||
|
type="date" |
||||
|
[id]="fieldId" |
||||
|
formControlName="value" |
||||
|
[class.is-invalid]="isInvalid" |
||||
|
class="form-control" |
||||
|
[attr.min]="field().min || null" |
||||
|
[attr.max]="field().max || null" |
||||
|
[attr.aria-required]="field().required || null" |
||||
|
[attr.aria-invalid]="isInvalid || null" |
||||
|
[attr.aria-describedby]="isInvalid ? errorId : null" |
||||
|
[attr.aria-label]="field().label | abpLocalization"> |
||||
|
@if (isInvalid) { |
||||
|
<ng-container [ngTemplateOutlet]="errorTemplate" /> |
||||
|
} |
||||
|
</div> |
||||
|
} @else if (field().type === 'datetime-local') { |
||||
|
<!-- DateTime Local Input --> |
||||
|
<div class="form-group mb-3"> |
||||
|
<ng-container [ngTemplateOutlet]="labelTemplate" /> |
||||
|
<input |
||||
|
type="datetime-local" |
||||
|
[id]="fieldId" |
||||
|
formControlName="value" |
||||
|
[class.is-invalid]="isInvalid" |
||||
|
class="form-control" |
||||
|
[attr.min]="field().min || null" |
||||
|
[attr.max]="field().max || null" |
||||
|
[attr.aria-required]="field().required || null" |
||||
|
[attr.aria-invalid]="isInvalid || null" |
||||
|
[attr.aria-describedby]="isInvalid ? errorId : null" |
||||
|
[attr.aria-label]="field().label | abpLocalization"> |
||||
|
@if (isInvalid) { |
||||
|
<ng-container [ngTemplateOutlet]="errorTemplate" /> |
||||
|
} |
||||
|
</div> |
||||
|
} @else if (field().type === 'time') { |
||||
|
<!-- Time Input --> |
||||
|
<div class="form-group mb-3"> |
||||
|
<ng-container [ngTemplateOutlet]="labelTemplate" /> |
||||
|
<input |
||||
|
type="time" |
||||
|
[id]="fieldId" |
||||
|
formControlName="value" |
||||
|
[class.is-invalid]="isInvalid" |
||||
|
class="form-control" |
||||
|
[attr.min]="field().min || null" |
||||
|
[attr.max]="field().max || null" |
||||
|
[attr.step]="field().step || null" |
||||
|
[attr.aria-required]="field().required || null" |
||||
|
[attr.aria-invalid]="isInvalid || null" |
||||
|
[attr.aria-describedby]="isInvalid ? errorId : null" |
||||
|
[attr.aria-label]="field().label | abpLocalization"> |
||||
|
@if (isInvalid) { |
||||
|
<ng-container [ngTemplateOutlet]="errorTemplate" /> |
||||
|
} |
||||
|
</div> |
||||
|
} @else if (field().type === 'password') { |
||||
|
<!-- Password Input --> |
||||
|
<div class="form-group mb-3"> |
||||
|
<ng-container [ngTemplateOutlet]="labelTemplate" /> |
||||
|
<input |
||||
|
type="password" |
||||
|
[id]="fieldId" |
||||
|
formControlName="value" |
||||
|
[placeholder]="(field().placeholder || '') | abpLocalization" |
||||
|
[class.is-invalid]="isInvalid" |
||||
|
class="form-control" |
||||
|
[attr.minlength]="field().minLength || null" |
||||
|
[attr.maxlength]="field().maxLength || null" |
||||
|
[attr.aria-required]="field().required || null" |
||||
|
[attr.aria-invalid]="isInvalid || null" |
||||
|
[attr.aria-describedby]="isInvalid ? errorId : null" |
||||
|
[attr.aria-label]="field().label | abpLocalization" |
||||
|
autocomplete="new-password"> |
||||
|
@if (isInvalid) { |
||||
|
<ng-container [ngTemplateOutlet]="errorTemplate" /> |
||||
|
} |
||||
|
</div> |
||||
|
} @else if (field().type === 'tel') { |
||||
|
<!-- Tel Input --> |
||||
|
<div class="form-group mb-3"> |
||||
|
<ng-container [ngTemplateOutlet]="labelTemplate" /> |
||||
|
<input |
||||
|
type="tel" |
||||
|
[id]="fieldId" |
||||
|
formControlName="value" |
||||
|
[placeholder]="(field().placeholder || '') | abpLocalization" |
||||
|
[class.is-invalid]="isInvalid" |
||||
|
class="form-control" |
||||
|
[attr.pattern]="field().pattern || null" |
||||
|
[attr.aria-required]="field().required || null" |
||||
|
[attr.aria-invalid]="isInvalid || null" |
||||
|
[attr.aria-describedby]="isInvalid ? errorId : null" |
||||
|
[attr.aria-label]="field().label | abpLocalization" |
||||
|
autocomplete="tel"> |
||||
|
@if (isInvalid) { |
||||
|
<ng-container [ngTemplateOutlet]="errorTemplate" /> |
||||
|
} |
||||
|
</div> |
||||
|
} @else if (field().type === 'url') { |
||||
|
<!-- URL Input --> |
||||
|
<div class="form-group mb-3"> |
||||
|
<ng-container [ngTemplateOutlet]="labelTemplate" /> |
||||
|
<input |
||||
|
type="url" |
||||
|
[id]="fieldId" |
||||
|
formControlName="value" |
||||
|
[placeholder]="(field().placeholder || '') | abpLocalization" |
||||
|
[class.is-invalid]="isInvalid" |
||||
|
class="form-control" |
||||
|
[attr.aria-required]="field().required || null" |
||||
|
[attr.aria-invalid]="isInvalid || null" |
||||
|
[attr.aria-describedby]="isInvalid ? errorId : null" |
||||
|
[attr.aria-label]="field().label | abpLocalization" |
||||
|
autocomplete="url"> |
||||
|
@if (isInvalid) { |
||||
|
<ng-container [ngTemplateOutlet]="errorTemplate" /> |
||||
|
} |
||||
|
</div> |
||||
|
} @else if (field().type === 'radio') { |
||||
|
<!-- Radio Group --> |
||||
|
<div class="form-group mb-3" role="radiogroup" [attr.aria-labelledby]="fieldId + '-label'"> |
||||
|
<ng-container [ngTemplateOutlet]="labelTemplate" /> |
||||
|
<div class="radio-group"> |
||||
|
@for (option of options$ | async; track option.key) { |
||||
|
<div class="form-check"> |
||||
|
<input |
||||
|
type="radio" |
||||
|
[id]="fieldId + '-' + option.key" |
||||
|
[value]="option.key" |
||||
|
formControlName="value" |
||||
|
[class.is-invalid]="isInvalid" |
||||
|
class="form-check-input" |
||||
|
[attr.aria-required]="field().required || null" |
||||
|
[attr.aria-invalid]="isInvalid || null" |
||||
|
[attr.aria-describedby]="isInvalid ? errorId : null"> |
||||
|
<label [for]="fieldId + '-' + option.key" class="form-check-label"> |
||||
|
{{ option.value | abpLocalization }} |
||||
|
</label> |
||||
|
</div> |
||||
|
} |
||||
|
</div> |
||||
|
@if (isInvalid) { |
||||
|
<ng-container [ngTemplateOutlet]="errorTemplate" /> |
||||
|
} |
||||
|
</div> |
||||
|
} @else if (field().type === 'file') { |
||||
|
<!-- File Input --> |
||||
|
<div class="form-group mb-3"> |
||||
|
<ng-container [ngTemplateOutlet]="labelTemplate" /> |
||||
|
<input |
||||
|
type="file" |
||||
|
[id]="fieldId" |
||||
|
(change)="onFileChange($event)" |
||||
|
[class.is-invalid]="isInvalid" |
||||
|
class="form-control" |
||||
|
[attr.accept]="field().accept || null" |
||||
|
[attr.multiple]="field().multiple || null" |
||||
|
[attr.aria-required]="field().required || null" |
||||
|
[attr.aria-invalid]="isInvalid || null" |
||||
|
[attr.aria-describedby]="isInvalid ? errorId : null" |
||||
|
[attr.aria-label]="field().label | abpLocalization"> |
||||
|
@if (isInvalid) { |
||||
|
<ng-container [ngTemplateOutlet]="errorTemplate" /> |
||||
|
} |
||||
|
</div> |
||||
|
} @else if (field().type === 'range') { |
||||
|
<!-- Range Slider --> |
||||
|
<div class="form-group mb-3"> |
||||
|
<ng-container [ngTemplateOutlet]="labelTemplate" /> |
||||
|
<div class="d-flex align-items-center gap-3"> |
||||
|
<input |
||||
|
type="range" |
||||
|
[id]="fieldId" |
||||
|
formControlName="value" |
||||
|
[class.is-invalid]="isInvalid" |
||||
|
class="form-range flex-grow-1" |
||||
|
[attr.min]="field().min || 0" |
||||
|
[attr.max]="field().max || 100" |
||||
|
[attr.step]="field().step || 1" |
||||
|
[attr.aria-required]="field().required || null" |
||||
|
[attr.aria-invalid]="isInvalid || null" |
||||
|
[attr.aria-describedby]="isInvalid ? errorId : null" |
||||
|
[attr.aria-label]="field().label | abpLocalization" |
||||
|
[attr.aria-valuenow]="value.value" |
||||
|
[attr.aria-valuemin]="field().min || 0" |
||||
|
[attr.aria-valuemax]="field().max || 100"> |
||||
|
<output [for]="fieldId" class="badge bg-primary">{{ value.value }}</output> |
||||
|
</div> |
||||
|
@if (isInvalid) { |
||||
|
<ng-container [ngTemplateOutlet]="errorTemplate" /> |
||||
|
} |
||||
|
</div> |
||||
|
} @else if (field().type === 'color') { |
||||
|
<!-- Color Picker --> |
||||
|
<div class="form-group mb-3"> |
||||
|
<ng-container [ngTemplateOutlet]="labelTemplate" /> |
||||
|
<div class="d-flex align-items-center gap-3"> |
||||
|
<input |
||||
|
type="color" |
||||
|
[id]="fieldId" |
||||
|
formControlName="value" |
||||
|
[class.is-invalid]="isInvalid" |
||||
|
class="form-control form-control-color" |
||||
|
[attr.aria-required]="field().required || null" |
||||
|
[attr.aria-invalid]="isInvalid || null" |
||||
|
[attr.aria-describedby]="isInvalid ? errorId : null" |
||||
|
[attr.aria-label]="field().label | abpLocalization"> |
||||
|
<code class="text-muted">{{ value.value || '#000000' }}</code> |
||||
|
</div> |
||||
|
@if (isInvalid) { |
||||
|
<ng-container [ngTemplateOutlet]="errorTemplate" /> |
||||
|
} |
||||
|
</div> |
||||
|
} |
||||
|
</div> |
||||
|
} |
||||
|
|
||||
|
<ng-template #labelTemplate> |
||||
|
<label |
||||
|
[for]="fieldId" |
||||
|
[id]="fieldId + '-label'" |
||||
|
[class.required]="field().required"> |
||||
|
{{ field().label | abpLocalization }} |
||||
|
@if (field().required) { |
||||
|
<span class="text-danger" aria-label="required">*</span> |
||||
|
} |
||||
|
</label> |
||||
|
</ng-template> |
||||
|
|
||||
|
<ng-template #errorTemplate> |
||||
|
<div |
||||
|
class="invalid-feedback" |
||||
|
[id]="errorId" |
||||
|
role="alert" |
||||
|
aria-live="polite" |
||||
|
aria-atomic="true"> |
||||
|
@for (error of errors; track error) { |
||||
|
<div>{{ error | abpLocalization }}</div> |
||||
|
} |
||||
|
</div> |
||||
|
</ng-template> |
||||
@ -0,0 +1,12 @@ |
|||||
|
// Minimal styling - rely on Bootstrap/Lepton-X theme styles |
||||
|
.form-group { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
|
||||
|
// Radio group spacing (layout only) |
||||
|
.radio-group { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 0.5rem; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,180 @@ |
|||||
|
import { |
||||
|
ChangeDetectionStrategy, |
||||
|
ChangeDetectorRef, |
||||
|
Component, |
||||
|
DestroyRef, |
||||
|
forwardRef, |
||||
|
inject, |
||||
|
InjectionToken, Injector, |
||||
|
input, |
||||
|
OnInit, |
||||
|
} from '@angular/core'; |
||||
|
import { FormFieldConfig } from '../dynamic-form.models'; |
||||
|
import { |
||||
|
ControlValueAccessor, |
||||
|
FormBuilder, |
||||
|
FormControl, |
||||
|
FormControlName, |
||||
|
FormGroupDirective, |
||||
|
NG_VALUE_ACCESSOR, |
||||
|
NgControl, |
||||
|
FormGroup, |
||||
|
ReactiveFormsModule, |
||||
|
} from '@angular/forms'; |
||||
|
import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; |
||||
|
import { NgTemplateOutlet, AsyncPipe } from '@angular/common'; |
||||
|
import { LocalizationPipe } from '@abp/ng.core'; |
||||
|
import { FormCheckboxComponent } from '@abp/ng.theme.shared'; |
||||
|
import { Observable, of } from 'rxjs'; |
||||
|
import { DynamicFormService } from '../dynamic-form.service'; |
||||
|
|
||||
|
export const ABP_DYNAMIC_FORM_FIELD = new InjectionToken<DynamicFormFieldComponent>('AbpDynamicFormField'); |
||||
|
|
||||
|
const DYNAMIC_FORM_FIELD_CONTROL_VALUE_ACCESSOR = { |
||||
|
provide: NG_VALUE_ACCESSOR, |
||||
|
useExisting: forwardRef(() => DynamicFormFieldComponent), |
||||
|
multi: true, |
||||
|
}; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'abp-dynamic-form-field', |
||||
|
templateUrl: './dynamic-form-field.component.html', |
||||
|
styleUrls: ['./dynamic-form-field.component.scss'], |
||||
|
providers: [ |
||||
|
{ provide: ABP_DYNAMIC_FORM_FIELD, useExisting: DynamicFormFieldComponent }, |
||||
|
DYNAMIC_FORM_FIELD_CONTROL_VALUE_ACCESSOR, |
||||
|
], |
||||
|
host: { class: 'abp-dynamic-form-field' }, |
||||
|
exportAs: 'abpDynamicFormField', |
||||
|
changeDetection: ChangeDetectionStrategy.OnPush, |
||||
|
imports: [NgTemplateOutlet, LocalizationPipe, ReactiveFormsModule, FormCheckboxComponent, AsyncPipe], |
||||
|
}) |
||||
|
export class DynamicFormFieldComponent implements OnInit, ControlValueAccessor { |
||||
|
field = input.required<FormFieldConfig>(); |
||||
|
visible = input<boolean>(true); |
||||
|
control!: FormControl; |
||||
|
fieldFormGroup: FormGroup; |
||||
|
readonly changeDetectorRef = inject(ChangeDetectorRef); |
||||
|
readonly destroyRef = inject(DestroyRef); |
||||
|
private injector = inject(Injector); |
||||
|
private formBuilder = inject(FormBuilder); |
||||
|
private dynamicFormService = inject(DynamicFormService); |
||||
|
|
||||
|
options$: Observable<{ key: string; value: any }[]> = of([]); |
||||
|
|
||||
|
// Accessibility: Generate unique IDs for ARIA
|
||||
|
get fieldId(): string { |
||||
|
return `field-${this.field().key}`; |
||||
|
} |
||||
|
|
||||
|
get errorId(): string { |
||||
|
return `${this.fieldId}-error`; |
||||
|
} |
||||
|
|
||||
|
get helpTextId(): string { |
||||
|
return `${this.fieldId}-help`; |
||||
|
} |
||||
|
|
||||
|
constructor() { |
||||
|
this.fieldFormGroup = this.formBuilder.group({ |
||||
|
value: [{ value: '' }], |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
ngOnInit() { |
||||
|
const ngControl = this.injector.get(NgControl, null); |
||||
|
if (ngControl) { |
||||
|
this.control = this.injector.get(FormGroupDirective).getControl(ngControl as FormControlName); |
||||
|
} |
||||
|
this.value.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(value => { |
||||
|
this.onChange(value); |
||||
|
}); |
||||
|
|
||||
|
const options = this.field().options; |
||||
|
|
||||
|
if (options?.url) { |
||||
|
this.options$ = this.dynamicFormService.getOptions(options.url, options.apiName); |
||||
|
} else if (options?.defaultValues?.length) { |
||||
|
this.options$ = of( |
||||
|
options.defaultValues.map(item => { |
||||
|
return { |
||||
|
key: item[options.valueProp || 'key'] || item, |
||||
|
value: item[options.labelProp || 'value'] || item |
||||
|
}; |
||||
|
}) |
||||
|
); |
||||
|
} else { |
||||
|
this.options$ = of([]); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
writeValue(value: any[]): void { |
||||
|
this.value.setValue(value || ''); |
||||
|
this.changeDetectorRef.markForCheck(); |
||||
|
} |
||||
|
|
||||
|
registerOnChange(fn: any): void { |
||||
|
this.onChange = fn; |
||||
|
} |
||||
|
|
||||
|
registerOnTouched(fn: any): void { |
||||
|
this.onTouched = fn; |
||||
|
} |
||||
|
|
||||
|
setDisabledState(isDisabled: boolean): void { |
||||
|
if (isDisabled) { |
||||
|
this.value.disable(); |
||||
|
} else { |
||||
|
this.value.enable(); |
||||
|
} |
||||
|
this.changeDetectorRef.markForCheck(); |
||||
|
} |
||||
|
|
||||
|
get isInvalid(): boolean { |
||||
|
if (this.control) { |
||||
|
return this.control.invalid && (this.control.dirty || this.control.touched); |
||||
|
} |
||||
|
return false; |
||||
|
} |
||||
|
|
||||
|
get errors(): string[] { |
||||
|
if (!this.control?.errors) return []; |
||||
|
if (this.control && this.control.errors) { |
||||
|
const errorKeys = Object.keys(this.control.errors); |
||||
|
const validators = this.field().validators || []; |
||||
|
return errorKeys.map(key => { |
||||
|
const validator = validators.find( |
||||
|
v => v.type.toLowerCase() === key.toLowerCase(), |
||||
|
); |
||||
|
if (validator && validator.message) { |
||||
|
return validator.message; |
||||
|
} |
||||
|
// Fallback error messages
|
||||
|
if (key === 'required') return `${this.field().label} is required`; |
||||
|
if (key === 'email') return 'Please enter a valid email address'; |
||||
|
if (key === 'minlength') |
||||
|
return `Minimum length is ${this.control.errors[key].requiredLength}`; |
||||
|
if (key === 'maxlength') |
||||
|
return `Maximum length is ${this.control.errors[key].requiredLength}`; |
||||
|
return `${this.field().label} is invalid due to ${key} validation.`; |
||||
|
}); |
||||
|
} |
||||
|
return []; |
||||
|
} |
||||
|
get value() { |
||||
|
return this.fieldFormGroup.get('value'); |
||||
|
} |
||||
|
|
||||
|
onFileChange(event: Event) { |
||||
|
const input = event.target as HTMLInputElement; |
||||
|
if (input.files) { |
||||
|
const files = Array.from(input.files); |
||||
|
const value = this.field().multiple ? files : files[0]; |
||||
|
this.value.setValue(value); |
||||
|
this.onChange(value); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
private onChange: (value: any) => void = () => { }; |
||||
|
private onTouched: () => void = () => { }; |
||||
|
} |
||||
@ -0,0 +1,2 @@ |
|||||
|
export * from './dynamic-form-field.component'; |
||||
|
export * from './dynamic-form-field-host.component'; |
||||
@ -0,0 +1,36 @@ |
|||||
|
@if (visible()) { |
||||
|
<fieldset class="form-group-container" [formGroup]="formGroup()" role="group" [attr.aria-labelledby]="groupConfig().key + '-legend'"> |
||||
|
<legend [id]="groupConfig().key + '-legend'" class="form-group-legend"> |
||||
|
{{ groupConfig().label | abpLocalization }} |
||||
|
</legend> |
||||
|
|
||||
|
<div class="row"> |
||||
|
@for (field of sortedChildren; track field.key) { |
||||
|
<div [ngClass]="'col-md-' + (field.gridSize || 12)"> |
||||
|
|
||||
|
<!-- Nested Group (Recursive) --> |
||||
|
@if (field.type === 'group') { |
||||
|
<abp-dynamic-form-group |
||||
|
[groupConfig]="field" |
||||
|
[formGroup]="getChildFormGroup(field.key)" /> |
||||
|
} |
||||
|
|
||||
|
<!-- Nested Array --> |
||||
|
@else if (field.type === 'array') { |
||||
|
<abp-dynamic-form-array |
||||
|
[arrayConfig]="field" |
||||
|
[formGroup]="formGroup()" /> |
||||
|
} |
||||
|
|
||||
|
<!-- Regular Field --> |
||||
|
@else { |
||||
|
<abp-dynamic-form-field |
||||
|
[field]="field" |
||||
|
[formControlName]="field.key" /> |
||||
|
} |
||||
|
|
||||
|
</div> |
||||
|
} |
||||
|
</div> |
||||
|
</fieldset> |
||||
|
} |
||||
@ -0,0 +1,26 @@ |
|||||
|
.form-group-container { |
||||
|
border-left: 3px solid var(--bs-primary, #007bff); |
||||
|
padding-left: 1rem; |
||||
|
margin-bottom: 1.5rem; |
||||
|
border: 1px solid var(--bs-border-color, #dee2e6); |
||||
|
border-radius: 0.375rem; |
||||
|
padding: 1rem; |
||||
|
background-color: var(--bs-light, #f8f9fa); |
||||
|
|
||||
|
// Nested groups get lighter styling |
||||
|
.form-group-container { |
||||
|
border-left-color: var(--bs-secondary, #6c757d); |
||||
|
padding-left: 0.75rem; |
||||
|
background-color: var(--bs-white, #fff); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.form-group-legend { |
||||
|
font-size: 1.1rem; |
||||
|
font-weight: 600; |
||||
|
color: var(--bs-primary, #007bff); |
||||
|
margin-bottom: 1rem; |
||||
|
padding: 0 0.5rem; |
||||
|
float: none; |
||||
|
width: auto; |
||||
|
} |
||||
@ -0,0 +1,45 @@ |
|||||
|
import { |
||||
|
ChangeDetectionStrategy, |
||||
|
Component, |
||||
|
input, |
||||
|
forwardRef, |
||||
|
} from '@angular/core'; |
||||
|
import { FormGroup, ReactiveFormsModule } from '@angular/forms'; |
||||
|
import { CommonModule } from '@angular/common'; |
||||
|
import { FormFieldConfig } from '../dynamic-form.models'; |
||||
|
import { LocalizationPipe } from '@abp/ng.core'; |
||||
|
import { DynamicFormFieldComponent } from '../dynamic-form-field'; |
||||
|
import { DynamicFormArrayComponent } from '../dynamic-form-array'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'abp-dynamic-form-group', |
||||
|
templateUrl: './dynamic-form-group.component.html', |
||||
|
styleUrls: ['./dynamic-form-group.component.scss'], |
||||
|
changeDetection: ChangeDetectionStrategy.OnPush, |
||||
|
imports: [ |
||||
|
CommonModule, |
||||
|
ReactiveFormsModule, |
||||
|
LocalizationPipe, |
||||
|
DynamicFormFieldComponent, |
||||
|
forwardRef(() => DynamicFormArrayComponent), |
||||
|
forwardRef(() => DynamicFormGroupComponent), // Self reference for recursion
|
||||
|
], |
||||
|
}) |
||||
|
export class DynamicFormGroupComponent { |
||||
|
groupConfig = input.required<FormFieldConfig>(); |
||||
|
formGroup = input.required<FormGroup>(); |
||||
|
visible = input<boolean>(true); |
||||
|
|
||||
|
get sortedChildren(): FormFieldConfig[] { |
||||
|
const children = this.groupConfig().children || []; |
||||
|
return children.sort((a, b) => (a.order || 0) - (b.order || 0)); |
||||
|
} |
||||
|
|
||||
|
getChildFormGroup(key: string): FormGroup { |
||||
|
return this.formGroup().get(key) as FormGroup; |
||||
|
} |
||||
|
|
||||
|
getChildControl(key: string) { |
||||
|
return this.formGroup().get(key); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1 @@ |
|||||
|
export * from './dynamic-form-group.component'; |
||||
@ -0,0 +1,78 @@ |
|||||
|
<div class="form-wrapper"> |
||||
|
<form |
||||
|
[formGroup]="dynamicForm" |
||||
|
(ngSubmit)="submit()" |
||||
|
class="dynamic-form" |
||||
|
role="form" |
||||
|
[attr.aria-label]="'Dynamic Form'"> |
||||
|
<div class="row" role="group"> |
||||
|
@for (field of sortedFields; track field.key) { |
||||
|
<div [ngClass]="'col-md-' + (field.gridSize || 12)"> |
||||
|
|
||||
|
<!-- Custom Component --> |
||||
|
@if (field.component) { |
||||
|
<abp-dynamic-form-field-host |
||||
|
[component]="field.component" |
||||
|
[inputs]="{ field: field, visible: isFieldVisible(field) }" |
||||
|
formControlName="{{ field.key }}"> |
||||
|
</abp-dynamic-form-field-host> |
||||
|
} |
||||
|
|
||||
|
<!-- Nested Group --> |
||||
|
@else if (field.type === 'group') { |
||||
|
<abp-dynamic-form-group |
||||
|
[groupConfig]="field" |
||||
|
[formGroup]="getChildFormGroup(field.key)" |
||||
|
[visible]="isFieldVisible(field)"> |
||||
|
</abp-dynamic-form-group> |
||||
|
} |
||||
|
|
||||
|
<!-- Nested Array --> |
||||
|
@else if (field.type === 'array') { |
||||
|
<abp-dynamic-form-array |
||||
|
[arrayConfig]="field" |
||||
|
[formGroup]="dynamicForm" |
||||
|
[visible]="isFieldVisible(field)"> |
||||
|
</abp-dynamic-form-array> |
||||
|
} |
||||
|
|
||||
|
<!-- Regular Field --> |
||||
|
@else { |
||||
|
<abp-dynamic-form-field |
||||
|
[field]="field" |
||||
|
[formControlName]="field.key" |
||||
|
[visible]="isFieldVisible(field)"> |
||||
|
</abp-dynamic-form-field> |
||||
|
} |
||||
|
|
||||
|
</div> |
||||
|
} |
||||
|
</div> |
||||
|
<ng-content select="[actions]"> |
||||
|
<ng-container [ngTemplateOutlet]="defaultActions"></ng-container> |
||||
|
</ng-content> |
||||
|
|
||||
|
</form> |
||||
|
|
||||
|
<ng-template #defaultActions> |
||||
|
<div class="form-actions" role="group" aria-label="Form actions"> |
||||
|
@if (showCancelButton()) { |
||||
|
<button |
||||
|
type="button" |
||||
|
class="btn btn-secondary" |
||||
|
(click)="onCancel()" |
||||
|
aria-label="Cancel form"> |
||||
|
Cancel |
||||
|
</button> |
||||
|
} |
||||
|
<button |
||||
|
type="submit" |
||||
|
class="btn btn-primary" |
||||
|
[disabled]="!dynamicForm.valid || submitInProgress()" |
||||
|
[attr.aria-busy]="submitInProgress() || null" |
||||
|
[attr.aria-label]="submitInProgress() ? 'Submitting form...' : submitButtonText()"> |
||||
|
{{ submitButtonText() }} |
||||
|
</button> |
||||
|
</div> |
||||
|
</ng-template> |
||||
|
</div> |
||||
@ -0,0 +1,15 @@ |
|||||
|
:host(.abp-dynamic-form) { |
||||
|
form { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 0.5rem; |
||||
|
} |
||||
|
.form-wrapper { |
||||
|
text-align: left; |
||||
|
} |
||||
|
} |
||||
|
.form-actions { |
||||
|
display: flex; |
||||
|
justify-content: flex-end; |
||||
|
gap: 0.5rem; |
||||
|
} |
||||
@ -0,0 +1,203 @@ |
|||||
|
import { |
||||
|
ChangeDetectionStrategy, |
||||
|
Component, |
||||
|
input, |
||||
|
output, |
||||
|
inject, |
||||
|
OnInit, |
||||
|
DestroyRef, |
||||
|
ChangeDetectorRef, |
||||
|
} from '@angular/core'; |
||||
|
import { FormGroup, ReactiveFormsModule } from '@angular/forms'; |
||||
|
import { CommonModule } from '@angular/common'; |
||||
|
import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; |
||||
|
import { DynamicFormService } from './dynamic-form.service'; |
||||
|
import { ConditionalAction, FormFieldConfig } from './dynamic-form.models'; |
||||
|
import { DynamicFormFieldComponent, DynamicFieldHostComponent } from './dynamic-form-field'; |
||||
|
import { DynamicFormGroupComponent } from './dynamic-form-group'; |
||||
|
import { DynamicFormArrayComponent } from './dynamic-form-array'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'abp-dynamic-form', |
||||
|
templateUrl: './dynamic-form.component.html', |
||||
|
styleUrls: ['./dynamic-form.component.scss'], |
||||
|
host: { class: 'abp-dynamic-form' }, |
||||
|
changeDetection: ChangeDetectionStrategy.OnPush, |
||||
|
exportAs: 'abpDynamicForm', |
||||
|
imports: [ |
||||
|
CommonModule, |
||||
|
DynamicFormFieldComponent, |
||||
|
DynamicFormGroupComponent, |
||||
|
DynamicFormArrayComponent, |
||||
|
ReactiveFormsModule, |
||||
|
DynamicFieldHostComponent, |
||||
|
], |
||||
|
}) |
||||
|
export class DynamicFormComponent implements OnInit { |
||||
|
fields = input<FormFieldConfig[]>([]); |
||||
|
values = input<Record<string, any>>(); |
||||
|
submitButtonText = input<string>('Submit'); |
||||
|
submitInProgress = input<boolean>(false); |
||||
|
showCancelButton = input<boolean>(false); |
||||
|
onSubmit = output<any>(); |
||||
|
formCancel = output<void>(); |
||||
|
private dynamicFormService = inject(DynamicFormService); |
||||
|
readonly destroyRef = inject(DestroyRef); |
||||
|
readonly changeDetectorRef = inject(ChangeDetectorRef); |
||||
|
|
||||
|
dynamicForm!: FormGroup; |
||||
|
fieldVisibility: { [key: string]: boolean } = {}; |
||||
|
|
||||
|
ngOnInit() { |
||||
|
this.setupFormAndLogic(); |
||||
|
} |
||||
|
|
||||
|
get sortedFields(): FormFieldConfig[] { |
||||
|
return this.fields().sort((a, b) => (a.order || 0) - (b.order || 0)); |
||||
|
} |
||||
|
|
||||
|
submit() { |
||||
|
if (this.dynamicForm.valid) { |
||||
|
this.onSubmit.emit(this.dynamicForm.getRawValue()); |
||||
|
} else { |
||||
|
this.markAllFieldsAsTouched(); |
||||
|
this.focusFirstInvalidField(); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
onCancel() { |
||||
|
this.formCancel.emit(); |
||||
|
} |
||||
|
|
||||
|
onFieldChange(event: { fieldKey: string; value: any }) { |
||||
|
this.evaluateConditionalLogic(event.fieldKey); |
||||
|
} |
||||
|
|
||||
|
isFieldVisible(field: FormFieldConfig): boolean { |
||||
|
return this.fieldVisibility[field.key] !== false; |
||||
|
} |
||||
|
|
||||
|
getChildFormGroup(key: string): FormGroup { |
||||
|
return this.dynamicForm.get(key) as FormGroup; |
||||
|
} |
||||
|
|
||||
|
resetForm() { |
||||
|
const initialValues: { [key: string]: any } = this.dynamicFormService.getInitialValues( |
||||
|
this.fields(), |
||||
|
); |
||||
|
this.dynamicForm.reset({ ...initialValues }); |
||||
|
this.dynamicForm.markAsUntouched(); |
||||
|
this.dynamicForm.markAsPristine(); |
||||
|
this.changeDetectorRef.markForCheck(); |
||||
|
} |
||||
|
|
||||
|
private initializeFieldVisibility() { |
||||
|
this.fields().forEach(field => { |
||||
|
this.fieldVisibility = { |
||||
|
...this.fieldVisibility, |
||||
|
[field.key]: !field.conditionalLogic?.length, |
||||
|
}; |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
private setupConditionalLogic() { |
||||
|
this.fields().forEach(field => { |
||||
|
if (field.conditionalLogic) { |
||||
|
field.conditionalLogic.forEach(rule => { |
||||
|
const dependentControl = this.dynamicForm.get(rule.dependsOn); |
||||
|
if (dependentControl) { |
||||
|
this.evaluateConditionalLogic(field.key); |
||||
|
dependentControl.valueChanges |
||||
|
.pipe(takeUntilDestroyed(this.destroyRef)) |
||||
|
.subscribe(() => { |
||||
|
this.evaluateConditionalLogic(field.key); |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
private evaluateConditionalLogic(fieldKey: string) { |
||||
|
const field = this.fields().find(f => f.key === fieldKey); |
||||
|
if (!field?.conditionalLogic) return; |
||||
|
|
||||
|
field.conditionalLogic.forEach(rule => { |
||||
|
const dependentValue = this.dynamicForm.get(rule.dependsOn)?.value; |
||||
|
const conditionMet = this.evaluateCondition(dependentValue, rule.condition, rule.value); |
||||
|
|
||||
|
this.applyConditionalAction(fieldKey, rule.action, conditionMet); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
private evaluateCondition(fieldValue: any, condition: string, ruleValue: any): boolean { |
||||
|
switch (condition) { |
||||
|
case 'equals': |
||||
|
return fieldValue === ruleValue; |
||||
|
case 'notEquals': |
||||
|
return fieldValue !== ruleValue; |
||||
|
case 'contains': |
||||
|
return fieldValue && fieldValue.includes && fieldValue.includes(ruleValue); |
||||
|
case 'greaterThan': |
||||
|
return Number(fieldValue) > Number(ruleValue); |
||||
|
case 'lessThan': |
||||
|
return Number(fieldValue) < Number(ruleValue); |
||||
|
default: |
||||
|
return false; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
private applyConditionalAction(fieldKey: string, action: string, shouldApply: boolean) { |
||||
|
const control = this.dynamicForm.get(fieldKey); |
||||
|
|
||||
|
switch (action) { |
||||
|
case ConditionalAction.SHOW: |
||||
|
this.fieldVisibility = { ...this.fieldVisibility, [fieldKey]: shouldApply }; |
||||
|
break; |
||||
|
case ConditionalAction.HIDE: |
||||
|
this.fieldVisibility = { ...this.fieldVisibility, [fieldKey]: !shouldApply }; |
||||
|
break; |
||||
|
case ConditionalAction.ENABLE: |
||||
|
if (control) { |
||||
|
shouldApply ? control.enable() : control.disable(); |
||||
|
} |
||||
|
break; |
||||
|
case ConditionalAction.DISABLE: |
||||
|
if (control) { |
||||
|
shouldApply ? control.disable() : control.enable(); |
||||
|
} |
||||
|
break; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
private setupFormAndLogic() { |
||||
|
this.dynamicForm = this.dynamicFormService.createFormGroup(this.fields()); |
||||
|
this.initializeFieldVisibility(); |
||||
|
this.setupConditionalLogic(); |
||||
|
this.changeDetectorRef.markForCheck(); |
||||
|
} |
||||
|
|
||||
|
private markAllFieldsAsTouched() { |
||||
|
Object.keys(this.dynamicForm.controls).forEach(key => { |
||||
|
this.dynamicForm.get(key)?.markAsTouched(); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
private focusFirstInvalidField() { |
||||
|
// Accessibility: Focus first invalid field for screen readers
|
||||
|
const firstInvalidField = this.sortedFields.find(field => { |
||||
|
const control = this.dynamicForm.get(field.key); |
||||
|
return control && control.invalid && control.touched; |
||||
|
}); |
||||
|
|
||||
|
if (firstInvalidField) { |
||||
|
setTimeout(() => { |
||||
|
const element = document.getElementById(`field-${firstInvalidField.key}`); |
||||
|
if (element) { |
||||
|
element.focus(); |
||||
|
element.scrollIntoView({ behavior: 'smooth', block: 'center' }); |
||||
|
} |
||||
|
}, 100); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,60 @@ |
|||||
|
import { Type } from '@angular/core'; |
||||
|
import { ControlValueAccessor } from '@angular/forms'; |
||||
|
|
||||
|
export interface FormFieldConfig<T = any> { |
||||
|
key: string; |
||||
|
value?: any; |
||||
|
type: 'text' | 'email' | 'number' | 'select' | 'checkbox' | 'date' | 'textarea' | 'datetime-local' | 'time' | 'password' | 'tel' | 'url' | 'radio' | 'file' | 'range' | 'color' | 'group' | 'array'; |
||||
|
label: string; |
||||
|
placeholder?: string; |
||||
|
required?: boolean; |
||||
|
disabled?: boolean; |
||||
|
options?: OptionProps<T>; |
||||
|
validators?: ValidatorConfig[]; |
||||
|
conditionalLogic?: ConditionalRule[]; |
||||
|
order?: number; |
||||
|
gridSize?: number; |
||||
|
component?: Type<ControlValueAccessor>; |
||||
|
// Additional field attributes
|
||||
|
min?: number | string; // For number, date, time, range
|
||||
|
max?: number | string; // For number, date, time, range
|
||||
|
step?: number | string; // For number, time, range
|
||||
|
minLength?: number; // For text, password
|
||||
|
maxLength?: number; // For text, password
|
||||
|
pattern?: string; // For tel, text
|
||||
|
accept?: string; // For file input (e.g., "image/*")
|
||||
|
multiple?: boolean; // For file input
|
||||
|
// Nested form support (for group and array types)
|
||||
|
children?: FormFieldConfig[]; // Child fields for nested forms
|
||||
|
minItems?: number; // For array type: minimum number of items
|
||||
|
maxItems?: number; // For array type: maximum number of items
|
||||
|
} |
||||
|
|
||||
|
export interface ValidatorConfig { |
||||
|
type: 'required' | 'email' | 'minLength' | 'maxLength' | 'pattern' | 'custom' | 'min' | 'max' | 'requiredTrue'; |
||||
|
value?: any; |
||||
|
message: string; |
||||
|
} |
||||
|
|
||||
|
export interface ConditionalRule { |
||||
|
dependsOn: string; |
||||
|
condition: 'equals' | 'notEquals' | 'contains' | 'greaterThan' | 'lessThan'; |
||||
|
value: any; |
||||
|
action: 'show' | 'hide' | 'enable' | 'disable'; |
||||
|
} |
||||
|
|
||||
|
export enum ConditionalAction { |
||||
|
SHOW = 'show', |
||||
|
HIDE = 'hide', |
||||
|
ENABLE = 'enable', |
||||
|
DISABLE = 'disable' |
||||
|
} |
||||
|
|
||||
|
export interface OptionProps<T = any> { |
||||
|
defaultValues?: T[]; |
||||
|
url?: string; |
||||
|
disabled?: (option: T) => boolean; |
||||
|
labelProp?: string; |
||||
|
valueProp?: string; |
||||
|
apiName?: string; |
||||
|
} |
||||
@ -0,0 +1,119 @@ |
|||||
|
import {Injectable, inject} from '@angular/core'; |
||||
|
import {FormControl, FormGroup, FormArray, ValidatorFn, Validators, FormBuilder} from '@angular/forms'; |
||||
|
import {FormFieldConfig, ValidatorConfig} from './dynamic-form.models'; |
||||
|
import { RestService } from '@abp/ng.core'; |
||||
|
|
||||
|
@Injectable({ |
||||
|
providedIn: 'root' |
||||
|
}) |
||||
|
|
||||
|
export class DynamicFormService { |
||||
|
|
||||
|
private formBuilder = inject(FormBuilder); |
||||
|
private restService = inject(RestService); |
||||
|
apiName = 'DynamicFormService'; |
||||
|
|
||||
|
createFormGroup(fields: FormFieldConfig[]): FormGroup { |
||||
|
const group: any = {}; |
||||
|
|
||||
|
fields.forEach(field => { |
||||
|
// Nested Group
|
||||
|
if (field.type === 'group') { |
||||
|
group[field.key] = this.createFormGroup(field.children || []); |
||||
|
} |
||||
|
// Nested Array
|
||||
|
else if (field.type === 'array') { |
||||
|
group[field.key] = this.createFormArray(field); |
||||
|
} |
||||
|
// Regular Field
|
||||
|
else { |
||||
|
const validators = this.buildValidators(field.validators || []); |
||||
|
const initialValue = this.getInitialValue(field); |
||||
|
|
||||
|
group[field.key] = new FormControl({ |
||||
|
value: initialValue, |
||||
|
disabled: field.disabled || false |
||||
|
}, validators); |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
return this.formBuilder.group(group); |
||||
|
} |
||||
|
|
||||
|
createFormArray(arrayConfig: FormFieldConfig): FormArray { |
||||
|
const items: FormGroup[] = []; |
||||
|
const minItems = arrayConfig.minItems || 0; |
||||
|
|
||||
|
// Create minimum required items
|
||||
|
for (let i = 0; i < minItems; i++) { |
||||
|
items.push(this.createFormGroup(arrayConfig.children || [])); |
||||
|
} |
||||
|
|
||||
|
return this.formBuilder.array(items); |
||||
|
} |
||||
|
|
||||
|
getInitialValues(fields: FormFieldConfig[]): any { |
||||
|
const initialValues: any = {}; |
||||
|
fields.forEach(field => { |
||||
|
if (field.type === 'group') { |
||||
|
initialValues[field.key] = this.getInitialValues(field.children || []); |
||||
|
} else if (field.type === 'array') { |
||||
|
initialValues[field.key] = []; |
||||
|
} else { |
||||
|
initialValues[field.key] = this.getInitialValue(field); |
||||
|
} |
||||
|
}); |
||||
|
return initialValues; |
||||
|
} |
||||
|
|
||||
|
getOptions(url: string, apiName?: string): any { |
||||
|
return this.restService.request<any, any[]>({ |
||||
|
method: 'GET', |
||||
|
url, |
||||
|
}, |
||||
|
{ apiName: apiName || this.apiName }); |
||||
|
} |
||||
|
|
||||
|
private buildValidators(validatorConfigs: ValidatorConfig[]): ValidatorFn[] { |
||||
|
return validatorConfigs.map(config => { |
||||
|
switch (config.type) { |
||||
|
case 'required': |
||||
|
return Validators.required; |
||||
|
case 'email': |
||||
|
return Validators.email; |
||||
|
case 'minLength': |
||||
|
return Validators.minLength(config.value); |
||||
|
case 'maxLength': |
||||
|
return Validators.maxLength(config.value); |
||||
|
case 'pattern': |
||||
|
return Validators.pattern(config.value); |
||||
|
case 'min': |
||||
|
return Validators.min(config.value); |
||||
|
case 'max': |
||||
|
return Validators.max(config.value); |
||||
|
case 'requiredTrue': |
||||
|
return Validators.requiredTrue; |
||||
|
default: |
||||
|
return Validators.nullValidator; |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
private getInitialValue(field: FormFieldConfig): any { |
||||
|
if (field.value !== undefined) { |
||||
|
return field.value; |
||||
|
} |
||||
|
switch (field.type) { |
||||
|
case 'checkbox': |
||||
|
return false; |
||||
|
case 'number': |
||||
|
return 0; |
||||
|
case 'group': |
||||
|
return this.getInitialValues(field.children || []); |
||||
|
case 'array': |
||||
|
return []; |
||||
|
default: |
||||
|
return ''; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,6 @@ |
|||||
|
export * from './dynamic-form.component'; |
||||
|
export * from './dynamic-form-field'; |
||||
|
export * from './dynamic-form.models'; |
||||
|
export * from './dynamic-form.service'; |
||||
|
export * from './dynamic-form-group'; |
||||
|
export * from './dynamic-form-array'; |
||||
Loading…
Reference in new issue