mirror of https://github.com/abpframework/abp.git
erdemcaygor
2 weeks ago
17 changed files with 953 additions and 18 deletions
@ -0,0 +1,343 @@ |
|||||
|
# 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 |
||||
|
|
||||
|
--- |
||||
|
|
||||
|
**Version:** 1.0.0 |
||||
|
**Added:** 2026-01-20 |
||||
|
**Status:** Production Ready ✅ |
||||
@ -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,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,46 @@ |
|||||
|
import { |
||||
|
ChangeDetectionStrategy, |
||||
|
Component, |
||||
|
input, |
||||
|
inject, |
||||
|
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'; |
||||
@ -1,3 +1,6 @@ |
|||||
export * from './dynamic-form.component'; |
export * from './dynamic-form.component'; |
||||
export * from './dynamic-form-field'; |
export * from './dynamic-form-field'; |
||||
export * from './dynamic-form.models'; |
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