NotificationsYou must be signed in to change notification settings
Fork3.6k
Star14k

Dynamic form component#23917

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Jump to bottom

Draft

erdemcaygor wants to merge20 commits intodev

base:dev

Choose a base branch

fromfeat/#23891

Draft

Dynamic form component#23917

erdemcaygor wants to merge20 commits intodevfromfeat/#23891

+813 −6

Conversation

Copy link

Contributor

erdemcaygor commentedOct 8, 2025•
edited
Loading

Resolves#23891

Config Interfaces

exportinterfaceFormFieldConfig{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>;}exportinterfaceValidatorConfig{type:'required'|'email'|'minLength'|'maxLength'|'pattern'|'custom'|'min'|'max'|'requiredTrue';value?:any;message:string;}exportinterfaceConditionalRule{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>

erdemcaygor added9 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 the10.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 added6 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 fromfahrigedik andsumeyyeKurtulus

October 9, 2025 14:08

reset form function added

1963745

Copy link

Member

fahrigedik commentedOct 10, 2025

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

erdemcaygor added3 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 fromCopilot

October 14, 2025 14:51

CopilotAI reviewed

Oct 14, 2025

View reviewed changes

Copy link

Contributor

CopilotAI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

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 orlearn how to get started.}

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

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

Copy link

CopilotAIOct 14, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

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

Suggested change

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

Copilot uses AI. Check for mistakes.

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

		}

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

Copy link

CopilotAIOct 14, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

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 uses AI. Check for mistakes.

...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.`;
		});
		}

Copy link

CopilotAIOct 14, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

Theerrors 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 uses AI. Check for mistakes.

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";

Copy link

CopilotAIOct 14, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

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

Copilot uses AI. Check for mistakes.

Labels

feature ui-angular

Movatterモバイル変換

Dynamic form component#23917

Are you sure you want to change the base?

Dynamic form component#23917

Conversation

erdemcaygor commentedOct 8, 2025• editedLoading Uh oh!There was an error while loading.Please reload this page.

Uh oh!

Config Interfaces

Example Usage

Uh oh!

fahrigedik commentedOct 10, 2025

Uh oh!

CopilotAI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

CopilotAIOct 14, 2025

Choose a reason for hiding this comment

Uh oh!

CopilotAIOct 14, 2025

Choose a reason for hiding this comment

Uh oh!

CopilotAIOct 14, 2025

Choose a reason for hiding this comment

Uh oh!

CopilotAIOct 14, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

erdemcaygor commentedOct 8, 2025•
edited
Loading