{
+ defaultValues?: T[]; // Static array of options
+ url?: string; // API endpoint URL
+ disabled?: (option: T) => boolean; // Function to disable specific options
+ labelProp?: string; // Property name for label
+ valueProp?: string; // Property name for value
+ apiName?: string; // API name for RestService
+}
+```
+
+## Conditional Logic
+
+The Dynamic Form Module supports conditional logic to show/hide or enable/disable fields based on other field values:
+
+```ts
+const formFields: FormFieldConfig[] = [
+ {
+ key: 'hasLicense',
+ type: 'checkbox',
+ label: 'Do you have a driver\'s license?',
+ order: 1,
+ },
+ {
+ key: 'licenseNumber',
+ type: 'text',
+ label: 'License Number',
+ placeholder: 'Enter your license number',
+ order: 2,
+ conditionalLogic: [
+ {
+ dependsOn: 'hasLicense',
+ condition: 'equals',
+ value: true,
+ action: 'show',
+ },
+ ],
+ },
+ {
+ key: 'age',
+ type: 'number',
+ label: 'Age',
+ order: 3,
+ },
+ {
+ key: 'parentConsent',
+ type: 'checkbox',
+ label: 'Parent Consent Required',
+ order: 4,
+ conditionalLogic: [
+ {
+ dependsOn: 'age',
+ condition: 'lessThan',
+ value: 18,
+ action: 'show',
+ },
+ ],
+ },
+];
+```
+
+### Conditional Rule Interface
+
+```ts
+interface ConditionalRule {
+ dependsOn: string; // Key of the field to watch
+ condition: string; // Condition type
+ value: any; // Value to compare against
+ action: string; // Action to perform
+}
+```
+
+### Available Conditions
+
+- `equals` - Field value equals the specified value
+- `notEquals` - Field value does not equal the specified value
+- `contains` - Field value contains the specified value (for strings/arrays)
+- `greaterThan` - Field value is greater than the specified value (for numbers)
+- `lessThan` - Field value is less than the specified value (for numbers)
+
+### Available Actions
+
+- `show` - Show the field when condition is met
+- `hide` - Hide the field when condition is met
+- `enable` - Enable the field when condition is met
+- `disable` - Disable the field when condition is met
+
+## Grid Layout
+
+You can use the `gridSize` property to control the Bootstrap grid layout:
+
+```ts
+const formFields: FormFieldConfig[] = [
+ {
+ key: 'firstName',
+ type: 'text',
+ label: 'First Name',
+ gridSize: 6, // Half width
+ order: 1,
+ },
+ {
+ key: 'lastName',
+ type: 'text',
+ label: 'Last Name',
+ gridSize: 6, // Half width
+ order: 2,
+ },
+ {
+ key: 'address',
+ type: 'textarea',
+ label: 'Address',
+ gridSize: 12, // Full width
+ order: 3,
+ },
+];
+```
+
+The `gridSize` property uses Bootstrap's 12-column grid system. If not specified, it defaults to 12 (full width).
+
+## Custom Components
+
+You can use custom components for specific fields by providing a component that implements `ControlValueAccessor`:
+
+```ts
+// custom-rating.component.ts
+import { Component, forwardRef } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+
+@Component({
+ selector: 'app-custom-rating',
+ template: `
+
+ @for (star of [1,2,3,4,5]; track star) {
+
+ ★
+
+ }
+
+ `,
+ styles: [`
+ .star { cursor: pointer; font-size: 24px; color: #ccc; }
+ .star.filled { color: #ffc107; }
+ `],
+ providers: [{
+ provide: NG_VALUE_ACCESSOR,
+ useExisting: forwardRef(() => CustomRatingComponent),
+ multi: true
+ }]
+})
+export class CustomRatingComponent implements ControlValueAccessor {
+ value = 0;
+ onChange: any = () => {};
+ onTouched: any = () => {};
+
+ setValue(rating: number) {
+ this.value = rating;
+ this.onChange(rating);
+ this.onTouched();
+ }
+
+ writeValue(value: any): void {
+ this.value = value || 0;
+ }
+
+ registerOnChange(fn: any): void {
+ this.onChange = fn;
+ }
+
+ registerOnTouched(fn: any): void {
+ this.onTouched = fn;
+ }
+}
+```
+
+Then use it in your form configuration:
+
+```ts
+import { CustomRatingComponent } from './custom-rating.component';
+
+const formFields: FormFieldConfig[] = [
+ {
+ key: 'rating',
+ type: 'text', // Type is ignored when using custom component
+ label: 'Rating',
+ component: CustomRatingComponent,
+ value: 3,
+ },
+];
+```
+
+## Setting Initial Values
+
+You can set initial values for the form fields in two ways:
+
+### 1. Using the `value` property in FormFieldConfig
+
+```ts
+const formFields: FormFieldConfig[] = [
+ {
+ key: 'firstName',
+ type: 'text',
+ label: 'First Name',
+ value: 'John',
+ },
+];
+```
+
+### 2. Using the `values` input
+
+```ts
+@Component({
+ template: `
+
+
+ `,
+})
+export class MyComponent {
+ formFields: FormFieldConfig[] = [
+ {
+ key: 'firstName',
+ type: 'text',
+ label: 'First Name',
+ },
+ {
+ key: 'lastName',
+ type: 'text',
+ label: 'Last Name',
+ },
+ ];
+
+ initialValues = {
+ firstName: 'John',
+ lastName: 'Doe',
+ };
+
+ handleSubmit(formValue: any) {
+ console.log(formValue);
+ }
+}
+```
+
+## Programmatic Form Control
+
+You can access the form instance using the `exportAs` property and template reference variable:
+
+```ts
+@Component({
+ template: `
+
+
+
+
+ `,
+})
+export class MyComponent {
+ formFields: FormFieldConfig[] = [
+ // ... field configurations
+ ];
+
+ handleSubmit(formValue: any) {
+ console.log(formValue);
+ }
+}
+```
+
+### Available Methods
+
+- `resetForm()` - Resets the form to its initial state
+- `submit()` - Programmatically submit the form
+
+## Custom Action Buttons
+
+You can customize the action buttons by projecting your own content:
+
+```ts
+@Component({
+ template: `
+
+
+
+
+
+
+
+
+ `,
+})
+export class MyComponent {
+ formFields: FormFieldConfig[] = [
+ // ... field configurations
+ ];
+
+ handleSubmit(formValue: any) {
+ console.log('Form submitted:', formValue);
+ }
+
+ handleCancel() {
+ console.log('Cancelled');
+ }
+
+ handleDraft() {
+ console.log('Saved as draft');
+ }
+}
+```
+
+## Complete Example
+
+Here's a complete example demonstrating various features:
+
+```ts
+import { Component } from '@angular/core';
+import { DynamicFormComponent } from '@abp/ng.components/dynamic-form';
+import { FormFieldConfig } from '@abp/ng.components/dynamic-form';
+
+@Component({
+ selector: 'app-employee-form',
+ imports: [DynamicFormComponent],
+ template: `
+
+
Employee Registration
+
+
+