Dynamic form component by erdemcaygor · Pull Request #23917 · abpframework/abp

erdemcaygor · 2025-10-08T13:59:28Z

Resolves #23891

TODO

Add nested form support
Select-type fields need support for dynamically loading options from an API (via Observables) instead of being limited to static values.

Config Interfaces

export interface FormFieldConfig {
  key: string;
  value?: any;
  type: 'text' | 'email' | 'number' | 'select' | 'checkbox' | 'date' | 'textarea';
  label: string;
  placeholder?: string;
  required?: boolean;
  disabled?: boolean;
  options?: { key: string; value: any }[];
  validators?: ValidatorConfig[];
  conditionalLogic?: ConditionalRule[];
  order?: number;
  gridSize?: number;
  component?: Type<ControlValueAccessor>;
}

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';
}

Example Usage

  formFields: FormFieldConfig[] = [
    {
      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: 2
    },
    {
      key: 'email',
      type: 'email',
      label: 'Email Address',
      placeholder: 'Enter email',
      required: true,
      validators: [
        { type: 'required', message: 'Email is required' },
        { type: 'email', message: 'Please enter a valid email' }
      ],
      order: 3
    },
    {
      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
    }
  ];

      <abp-dynamic-form [fields]="formFields">
      </abp-dynamic-form>

fahrigedik · 2025-10-10T12:53:49Z

Thanks for contributions. feature is very good but support for nested forms should be added.

Copilot

Pull Request Overview

This PR introduces a new dynamic form component for the ABP Angular framework that allows developers to create forms dynamically using configuration objects. The component supports various field types, validation, conditional logic, and custom components.

Adds a comprehensive dynamic form system with support for text, email, select, checkbox, textarea, and date field types
Implements conditional field visibility and enablement based on other field values
Provides validation configuration with custom error messages and built-in Angular validators

Reviewed Changes

Copilot reviewed 16 out of 16 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
npm/ng-packs/tsconfig.base.json	Adds TypeScript path mapping for the new dynamic-form package
npm/ng-packs/packages/components/dynamic-form/src/public-api.ts	Exports public API for the dynamic form components and models
npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.service.ts	Service for creating form groups and handling validation logic
npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.models.ts	Type definitions for form field configuration and validation
npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.component.ts	Main dynamic form component with conditional logic and form management
npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.component.scss	Styling for the dynamic form layout
npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.component.html	Template for rendering dynamic form fields and actions
npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/index.ts	Barrel export for form field components
npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.ts	Individual form field component with validation and error handling
npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.scss	Styling for individual form fields
npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.html	Template for rendering different field types
npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field-host.component.ts	Host component for dynamic custom field components
npm/ng-packs/packages/components/dynamic-form/ng-package.json	Package configuration for the dynamic form library
npm/ng-packs/apps/dev-app/src/server.ts	Removes conditional check for TLS rejection in development
npm/ng-packs/apps/dev-app/src/app/home/home.component.ts	Adds example usage of the dynamic form component
npm/ng-packs/apps/dev-app/src/app/home/home.component.html	Updates template to include dynamic form demonstration

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

Copilot · 2025-10-14T14:52:23Z

...acks/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.ts

+        const validator = this.field().validators.find(
+          v => v.type.toLowerCase() === key.toLowerCase(),
+        );
+        console.log(this.field().validators, key);


Remove console.log statement used for debugging. This should not be present in production code.

Suggested change

console.log(this.field().validators, key);

Copilot · 2025-10-14T14:52:24Z

npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.component.ts

+  }
+
+  submit() {
+    console.log(this.dynamicForm.valid, this.dynamicForm.value);


Remove console.log statement used for debugging. This should not be present in production code.

Suggested change

console.log(this.dynamicForm.valid, this.dynamicForm.value);

Copilot · 2025-10-14T14:52:24Z

...acks/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.ts

+          return `Maximum length is ${this.control.errors[key].requiredLength}`;
+        return `${this.field().label} is invalid due to ${key} validation.`;
+      });
+    }


The errors getter method doesn't return anything when there are no errors. It should return an empty array to ensure consistent return type.

Suggested change

}

}

return [];

Copilot · 2025-10-14T14:52:25Z

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

-if (environment.production === false) {
-  process.env["NODE_TLS_REJECT_UNAUTHORIZED"] = "0";
-}
+process.env["NODE_TLS_REJECT_UNAUTHORIZED"] = "0";


Setting NODE_TLS_REJECT_UNAUTHORIZED to '0' disables TLS certificate validation globally, which is a security risk. This should be conditional for development environments only or use a more targeted approach.

Suggested change

process.env["NODE_TLS_REJECT_UNAUTHORIZED"] = "0";

if (!environment.production) {

process.env["NODE_TLS_REJECT_UNAUTHORIZED"] = "0";

}

npm/ng-packs/apps/dev-app/src/app/home/custom-input.ts

sumeyyeKurtulus · 2026-01-16T06:54:06Z

...acks/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.ts

+  }
+
+  get errors(): string[] {
+    if (this.control && this.control.errors) {


We can add a default return type here like this:

if (!this.control?.errors) return [];

sumeyyeKurtulus · 2026-01-16T06:55:42Z

...acks/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.ts

+
+    const options = this.field().options;
+
+    if (options?.url) {


We can extract these operations for clarity maybe like this

private initializeOptions(): void { 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(this.mapDefaultOptions(options)); } else { this.options$ = of([]); } } private mapDefaultOptions(options: OptionProps): { key: string; value: any }[] { return options.defaultValues.map(item => ({ key: item[options.valueProp || 'key'] || item, value: item[options.labelProp || 'value'] || item })); }

...acks/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.ts

fahrigedik · 2026-01-18T13:32:36Z

I agree with @sumeyyeKurtulus 's suggestions.
For the next version, we should consider adding Angular Aria support to this component for better accessibility.

erdemcaygor added 9 commits October 6, 2025 17:15

dynamic form component init

1adc27f

refactoring

fe26f71

refactoring

e8ced70

refactoring

753350d

refactoring

5ca3db5

refactoring

d19134b

refactoring

fb0dd44

form field updated

bc3f38f

dynamic form field validation logic updated

391c51e

erdemcaygor added this to the 10.1-preview milestone Oct 8, 2025

erdemcaygor added feature ui-angular labels Oct 8, 2025

removed unnecessary form field control interface

ffa3b85

erdemcaygor mentioned this pull request Oct 8, 2025

Building Dynamic Forms in Angular for Enterprise Applications #23810

Merged

erdemcaygor added 6 commits October 8, 2025 23:54

refactoring

6715aae

dynamic form field validator func updated

b094d5a

localization added for error messages

32f4047

refactoring

6ba1165

reset form function added

6e4179f

refactoring

d66c8d6

erdemcaygor requested review from fahrigedik and sumeyyeKurtulus October 9, 2025 14:08

reset form function added

1963745

erdemcaygor added 3 commits October 13, 2025 16:26

dynamic form field host component added to custom form input

a9486e9

refactoring

fbd7aa5

custom form field support added

3f2f25e

erdemcaygor requested a review from Copilot October 14, 2025 14:51

Copilot AI reviewed Oct 14, 2025

View reviewed changes

example

990f989

erdemcaygor added 5 commits December 2, 2025 23:38

Merge branch 'dev' into feat/#23891

b943365

example

da26bfc

example

fc2fcaf

Merge branch 'dev' into feat/#23891

fc34eac

dynamic options support added

77f16cb

sumeyyeKurtulus modified the milestones: 10.1-preview, 10.1-final Dec 29, 2025

skoc10 changed the base branch from dev to rel-10.1 December 30, 2025 08:22

erdemcaygor marked this pull request as ready for review December 31, 2025 06:11

erdemcaygor added 2 commits January 5, 2026 14:19

Merge branch 'rel-10.1' into feat/#23891

2db1b40

log removed

3831000

sumeyyeKurtulus reviewed Jan 16, 2026

View reviewed changes

npm/ng-packs/apps/dev-app/src/app/home/custom-input.ts Outdated Show resolved Hide resolved

sumeyyeKurtulus reviewed Jan 16, 2026

View reviewed changes

...acks/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.ts Show resolved Hide resolved

update: remove unused imports

ec35e77

erdemcaygor added 2 commits January 20, 2026 15:41

new types added. A11y updates

b4a44a4

nested form support added

90b2be5

fahrigedik approved these changes Jan 21, 2026

View reviewed changes

erdemcaygor added 3 commits January 21, 2026 10:05

refactor

b8d1170

refactor

cb866e6

unused imports removed

b5d6a9c

sumeyyeKurtulus approved these changes Jan 21, 2026

View reviewed changes

sumeyyeKurtulus merged commit 0410990 into rel-10.1 Jan 21, 2026
2 of 3 checks passed

sumeyyeKurtulus deleted the feat/#23891 branch January 21, 2026 11:23

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Dynamic form component#23917

Dynamic form component#23917
sumeyyeKurtulus merged 34 commits intorel-10.1from
feat/#23891

erdemcaygor commented Oct 8, 2025 •

edited

Loading

Uh oh!

fahrigedik commented Oct 10, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Oct 14, 2025

Uh oh!

Copilot AI Oct 14, 2025

Uh oh!

Copilot AI Oct 14, 2025

Uh oh!

Copilot AI Oct 14, 2025

Uh oh!

Uh oh!

sumeyyeKurtulus Jan 16, 2026

Uh oh!

sumeyyeKurtulus Jan 16, 2026

Uh oh!

Uh oh!

fahrigedik commented Jan 18, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

	console.log(this.dynamicForm.valid, this.dynamicForm.value);

Conversation

erdemcaygor commented Oct 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

TODO

Config Interfaces

Example Usage

Uh oh!

fahrigedik commented Oct 10, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Oct 14, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 14, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 14, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 14, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

sumeyyeKurtulus Jan 16, 2026

Choose a reason for hiding this comment

Uh oh!

sumeyyeKurtulus Jan 16, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

fahrigedik commented Jan 18, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

erdemcaygor commented Oct 8, 2025 •

edited

Loading