feat: add osmosys-form library #4
Conversation
WalkthroughThe recent changes introduce a new "Setup and Usage" section in the README and add comprehensive documentation for the Osmosys Form Library. A dynamic form rendering logic is implemented in Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant ParentComponent
participant OsmosysFormComponent
participant BackendService
User->>ParentComponent: Open Form Page
ParentComponent->>OsmosysFormComponent: Initialize Component with `formJsonData` and `modelData`
OsmosysFormComponent->>OsmosysFormComponent: ngOnInit()
OsmosysFormComponent->>OsmosysFormComponent: createForm()
OsmosysFormComponent->>ParentComponent: Emit formInstance
User->>OsmosysFormComponent: Fill Form and Submit
OsmosysFormComponent->>OsmosysFormComponent: handleButtonClick()
OsmosysFormComponent->>OsmosysFormComponent: validateAllFormFields()
alt Form Valid
OsmosysFormComponent->>BackendService: Submit Form Data
BackendService->>OsmosysFormComponent: Response
else Form Invalid
OsmosysFormComponent->>User: Show Errors
end
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (invoked as PR comments)
Additionally, you can add CodeRabbit Configration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
Files selected for processing (4)
- README.md (2 hunks)
- docs/usage.md (1 hunks)
- projects/osmosys-form/src/lib/osmosys-form.component.html (1 hunks)
- projects/osmosys-form/src/lib/osmosys-form.component.ts (1 hunks)
Files skipped from review due to trivial changes (1)
- README.md
Additional context used
Markdownlint
docs/usage.md
5-5: null
Link fragments should be valid(MD051, link-fragments)
6-6: null
Link fragments should be valid(MD051, link-fragments)
7-7: null
Link fragments should be valid(MD051, link-fragments)
8-8: null
Link fragments should be valid(MD051, link-fragments)
9-9: null
Link fragments should be valid(MD051, link-fragments)
10-10: null
Link fragments should be valid(MD051, link-fragments)
GitHub Check: Lint
projects/osmosys-form/src/lib/osmosys-form.component.ts
[failure] 29-29:
Unexpected any. Specify a different type
[failure] 30-30:
Expected blank line between class members
[failure] 30-30:
Expected blank line between class members
[failure] 30-30:
Unexpected any. Specify a different type
[failure] 31-31:
Expected blank line between class members
[failure] 31-31:
Expected blank line between class members
[failure] 31-31:
Unexpected any. Specify a different type
[failure] 32-32:
Expected blank line between class members
[failure] 32-32:
Expected blank line between class members
[failure] 33-33:
Expected blank line between class members
Additional comments not posted (16)
docs/usage.md (5)
12-14: Good introduction!The introduction provides a clear overview of the Osmosys Form Library.
16-47: Clear setup instructions!The setup instructions are clear and detailed, covering building, linking, and installing dependencies.
49-61: Clear configuration instructions!The configuration instructions are clear and provide a good overview of the key components.
63-90: Clear usage instructions!The usage instructions are clear and provide a good example of how to use the library in a parent component.
92-105: Comprehensive feature list!The feature list is comprehensive and accurately describes the supported features.
projects/osmosys-form/src/lib/osmosys-form.component.ts (6)
21-27: Correct component metadata!The component metadata is correctly defined, with appropriate selector, standalone flag, imports, template URL, and styles.
46-62: Good implementation of lifecycle methods!The lifecycle methods correctly handle initialization and input changes.
64-104: Good implementation of form creation logic!The form creation logic is well-structured and handles validations appropriately.
106-109: Good implementation of form update logic!The form update logic correctly updates the form values based on the provided data.
112-142: Good implementation of form management methods!The form management methods correctly handle button actions, validation, and form reset.
1-19: Ensure all imports are necessary.Verify that all imported modules and services are used in the component.
Verification successful
To verify that all imported modules and services are used in the
osmosys-form.component.tsfile, we need to adjust our search pattern to work around the file type issue withrg.
All imports are necessary and used within the component.
The following imports in
projects/osmosys-form/src/lib/osmosys-form.component.tsare verified to be used:
- ChangeDetectorRef
- EventEmitter
- Input
- OnInit
- Output
- SimpleChanges
- FormBuilder
- FormGroup
- FormsModule
- ReactiveFormsModule
- ValidatorFn
- Validators
- Router
- CommonModule
There are no unnecessary imports.
Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify that all imports in osmosys-form.component.ts are used in the component. # Test: Search for usage of imported modules and services in the component file. rg --type typescript -A 5 'ChangeDetectorRef|EventEmitter|Input|OnInit|Output|SimpleChanges|FormBuilder|FormGroup|FormsModule|ReactiveFormsModule|ValidatorFn|Validators|Router|CommonModule' projects/osmosys-form/src/lib/osmosys-form.component.tsLength of output: 282
Script:
#!/bin/bash # Description: Verify that all imports in osmosys-form.component.ts are used in the component. # Test: Search for usage of imported modules and services in the component file. rg 'ChangeDetectorRef|EventEmitter|Input|OnInit|Output|SimpleChanges|FormBuilder|FormGroup|FormsModule|ReactiveFormsModule|ValidatorFn|Validators|Router|CommonModule' projects/osmosys-form/src/lib/osmosys-form.component.tsLength of output: 1514
projects/osmosys-form/src/lib/osmosys-form.component.html (5)
1-5: Correct implementation of form container and title!The form container and title are correctly rendered based on the configuration.
6-15: Correct implementation of form structure!The form structure is correctly rendered with dynamic rows and columns based on the configuration.
16-318: Comprehensive implementation of form elements!The form elements are comprehensively implemented, covering various input types, select boxes, range sliders, date pickers, file uploads, multiselect dropdowns, buttons, color pickers, radio buttons, and text areas. Validations are handled appropriately.
212-220: Correct implementation of button actions!The button actions are correctly handled based on the configuration, including form submission and other actions.
38-317: Correct implementation of form validation feedback!The form validation feedback is correctly displayed based on the form control state, providing appropriate validation messages.
| 1. [Introduction](#introduction) | ||
| 2. [Setting Up the Library](#setting-up-the-library) | ||
| 3. [Creating the Configuration](#creating-the-configuration) | ||
| 4. [Using in Parent Component](#using-in-parent-component) | ||
| 5. [Supported Features](#supported-features) | ||
| 6. [Demo Repository](#demo-repository) |
There was a problem hiding this comment.
Fix invalid link fragments.
The link fragments in the Table of Contents should be valid.
- 1. [Introduction](#introduction)
- 2. [Setting Up the Library](#setting-up-the-library)
- 3. [Creating the Configuration](#creating-the-configuration)
- 4. [Using in Parent Component](#using-in-parent-component)
- 5. [Supported Features](#supported-features)
- 6. [Demo Repository](#demo-repository)
+ 1. [Introduction](#1-introduction)
+ 2. [Setting Up the Library](#2-setting-up-the-library)
+ 3. [Creating the Configuration](#3-creating-the-configuration)
+ 4. [Using in Parent Component](#4-using-in-parent-component)
+ 5. [Supported Features](#5-supported-features)
+ 6. [Demo Repository](#6-demo-repository)Committable suggestion was skipped due to low confidence.
Tools
Markdownlint
5-5: null
Link fragments should be valid(MD051, link-fragments)
6-6: null
Link fragments should be valid(MD051, link-fragments)
7-7: null
Link fragments should be valid(MD051, link-fragments)
8-8: null
Link fragments should be valid(MD051, link-fragments)
9-9: null
Link fragments should be valid(MD051, link-fragments)
10-10: null
Link fragments should be valid(MD051, link-fragments)
| @Input() formJsonData: any; | ||
| @Input() modelData: any; | ||
| @Output() formSubmit = new EventEmitter<any>(); | ||
| @Output() formInstance = new EventEmitter<FormGroup>(); | ||
| @Output() buttonAction = new EventEmitter<{ action: string; form: FormGroup }>(); | ||
|
|
||
| form: FormGroup; | ||
| formConfig: any; | ||
|
|
||
| constructor( | ||
| private fb: FormBuilder, | ||
| private router: Router, | ||
| private cdr: ChangeDetectorRef, | ||
| ) { | ||
| this.form = this.fb.group({}); | ||
| } |
There was a problem hiding this comment.
Specify types for class properties.
Avoid using any type for formJsonData, modelData, and formConfig.
- @Input() formJsonData: any;
- @Input() modelData: any;
- formConfig: any;
+ @Input() formJsonData: { layout: { rows: any[] } };
+ @Input() modelData: Record<string, any>;
+ formConfig: { layout: { rows: any[] } };Add blank lines between class members.
Improve readability by adding blank lines between class members.
- @Input() modelData: any;
+
+ @Input() modelData: any;Tools
GitHub Check: Lint
[failure] 29-29:
Unexpected any. Specify a different type
[failure] 30-30:
Expected blank line between class members
[failure] 30-30:
Expected blank line between class members
[failure] 30-30:
Unexpected any. Specify a different type
[failure] 31-31:
Expected blank line between class members
[failure] 31-31:
Expected blank line between class members
[failure] 31-31:
Unexpected any. Specify a different type
[failure] 32-32:
Expected blank line between class members
[failure] 32-32:
Expected blank line between class members
[failure] 33-33:
Expected blank line between class members
There was a problem hiding this comment.
Actionable comments posted: 4
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (6)
- angular.json (1 hunks)
- projects/osmosys-form/ng-package.json (1 hunks)
- projects/osmosys-form/src/lib/osmosys-form.component.ts (1 hunks)
- projects/osmosys-form/tsconfig.lib.json (1 hunks)
- projects/osmosys-form/tsconfig.spec.json (1 hunks)
- tsconfig.json (1 hunks)
Files skipped from review due to trivial changes (5)
- angular.json
- projects/osmosys-form/ng-package.json
- projects/osmosys-form/tsconfig.lib.json
- projects/osmosys-form/tsconfig.spec.json
- tsconfig.json
Additional context used
GitHub Check: Build
projects/osmosys-form/src/lib/osmosys-form.component.ts
[failure] 60-60:
Property 'formJsonData' comes from an index signature, so it must be accessed with ['formJsonData'].
[failure] 67-67:
Property 'modelData' comes from an index signature, so it must be accessed with ['modelData'].
[failure] 67-67:
Property 'formJsonData' comes from an index signature, so it must be accessed with ['formJsonData'].
Additional comments not posted (3)
projects/osmosys-form/src/lib/osmosys-form.component.ts (3)
45-51: Constructor looks good.The constructor correctly initializes the
formusingFormBuilder.
53-57: ngOnInit method looks good.The
ngOnInitmethod correctly initializesformConfigand callscreateFormwith the appropriate arguments.
122-127: Methods look good.The methods
handleButtonClick,validateAllFormFields, andonResetare well-implemented and do not have any issues.Also applies to: 130-140, 142-153
| @Input() formJsonData: any; | ||
|
|
||
| @Input() modelData: any; |
There was a problem hiding this comment.
Specify types and improve readability.
Avoid using any type for formJsonData, modelData, and formConfig. Add blank lines between class members to improve readability.
- @Input() formJsonData: any;
-
- @Input() modelData: any;
-
+ @Input() formJsonData: { layout: { rows: any[] } };
+
+ @Input() modelData: Record<string, any>;
+
+ formConfig: { layout: { rows: any[] } };Also applies to: 43-43
| updateFormValues(data: any) { | ||
| if (data) { | ||
| this.form.patchValue(data); | ||
| } |
There was a problem hiding this comment.
Specify types for parameters.
Avoid using any type for parameters in the updateFormValues method.
- updateFormValues(data: any) {
+ updateFormValues(data: Record<string, any>) {Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| updateFormValues(data: any) { | |
| if (data) { | |
| this.form.patchValue(data); | |
| } | |
| updateFormValues(data: Record<string, any>) { | |
| if (data) { | |
| this.form.patchValue(data); | |
| } |
| createForm(rows: any) { | ||
| const group: any = {}; | ||
| rows.forEach((row: any) => { | ||
| row.columns.forEach((column: any) => { | ||
| column.elements.forEach((element: any) => { | ||
| if ( | ||
| element.type === 'input' || | ||
| element.type === 'select' || | ||
| element.type === 'radio' || | ||
| element.type === 'checkbox' || | ||
| element.type === 'range' || | ||
| element.type === 'date' || | ||
| element.type === 'multiselect' || | ||
| element.type === 'textarea' || | ||
| element.type === 'file' || | ||
| element.type === 'color' | ||
| ) { | ||
| const validations: ValidatorFn[] = []; | ||
|
|
||
| if (element.validations) { | ||
| element.validations.forEach((validation: any) => { | ||
| if (validation.validator === 'required') { | ||
| validations.push(Validators.required); | ||
| } else if (validation.validator === 'minlength') { | ||
| validations.push(Validators.minLength(validation.value)); | ||
| } else if (validation.validator === 'maxlength') { | ||
| validations.push(Validators.maxLength(validation.value)); | ||
| } else if (validation.validator === 'pattern') { | ||
| validations.push(Validators.pattern(validation.value)); | ||
| } else if (validation.validator === 'requiredTrue') { | ||
| validations.push(Validators.requiredTrue); | ||
| } | ||
| }); | ||
| } | ||
|
|
||
| group[element.name] = this.fb.control(element.value || '', validations); | ||
| } | ||
| }); | ||
| }); | ||
| }); | ||
| this.form = this.fb.group(group); | ||
| this.updateFormValues(this.modelData); |
There was a problem hiding this comment.
Specify types for parameters and variables.
Avoid using any type for parameters and variables in the createForm method.
- createForm(rows: any) {
- const group: any = {};
- rows.forEach((row: any) => {
- row.columns.forEach((column: any) => {
- column.elements.forEach((element: any) => {
+ createForm(rows: { columns: { elements: { name: string, value: any, validations: { validator: string, value?: any }[] }[] }[] }[]) {
+ const group: { [key: string]: any } = {};
+ rows.forEach((row: { columns: { elements: { name: string, value: any, validations: { validator: string, value?: any }[] }[] }[] }) => {
+ row.columns.forEach((column: { elements: { name: string, value: any, validations: { validator: string, value?: any }[] }[] }) => {
+ column.elements.forEach((element: { name: string, value: any, validations: { validator: string, value?: any }[] }) => {Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| createForm(rows: any) { | |
| const group: any = {}; | |
| rows.forEach((row: any) => { | |
| row.columns.forEach((column: any) => { | |
| column.elements.forEach((element: any) => { | |
| if ( | |
| element.type === 'input' || | |
| element.type === 'select' || | |
| element.type === 'radio' || | |
| element.type === 'checkbox' || | |
| element.type === 'range' || | |
| element.type === 'date' || | |
| element.type === 'multiselect' || | |
| element.type === 'textarea' || | |
| element.type === 'file' || | |
| element.type === 'color' | |
| ) { | |
| const validations: ValidatorFn[] = []; | |
| if (element.validations) { | |
| element.validations.forEach((validation: any) => { | |
| if (validation.validator === 'required') { | |
| validations.push(Validators.required); | |
| } else if (validation.validator === 'minlength') { | |
| validations.push(Validators.minLength(validation.value)); | |
| } else if (validation.validator === 'maxlength') { | |
| validations.push(Validators.maxLength(validation.value)); | |
| } else if (validation.validator === 'pattern') { | |
| validations.push(Validators.pattern(validation.value)); | |
| } else if (validation.validator === 'requiredTrue') { | |
| validations.push(Validators.requiredTrue); | |
| } | |
| }); | |
| } | |
| group[element.name] = this.fb.control(element.value || '', validations); | |
| } | |
| }); | |
| }); | |
| }); | |
| this.form = this.fb.group(group); | |
| this.updateFormValues(this.modelData); | |
| createForm(rows: { columns: { elements: { name: string, value: any, validations: { validator: string, value?: any }[] }[] }[] }[]) { | |
| const group: { [key: string]: any } = {}; | |
| rows.forEach((row: { columns: { elements: { name: string, value: any, validations: { validator: string, value?: any }[] }[] }[] }) => { | |
| row.columns.forEach((column: { elements: { name: string, value: any, validations: { validator: string, value?: any }[] }[] }) => { | |
| column.elements.forEach((element: { name: string, value: any, validations: { validator: string, value?: any }[] }) => { |
| ngOnChanges(changes: SimpleChanges) { | ||
| if (changes.formJsonData) { | ||
| this.formConfig = this.formJsonData || {}; | ||
| this.createForm(this.formConfig.layout.rows); | ||
| this.cdr.detectChanges(); | ||
| this.formInstance.emit(this.form); | ||
| } | ||
|
|
||
| if (changes.modelData && !changes.formJsonData) { | ||
| this.updateFormValues(this.modelData); | ||
| } |
There was a problem hiding this comment.
Fix property access from index signatures.
Properties formJsonData and modelData come from an index signature, so they must be accessed with ['formJsonData'] and ['modelData'].
- if (changes.formJsonData) {
- this.formConfig = this.formJsonData || {};
+ if (changes['formJsonData']) {
+ this.formConfig = this['formJsonData'] || {};
- if (changes.modelData && !changes.formJsonData) {
- this.updateFormValues(this.modelData);
+ if (changes['modelData'] && !changes['formJsonData']) {
+ this.updateFormValues(this['modelData']);Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| ngOnChanges(changes: SimpleChanges) { | |
| if (changes.formJsonData) { | |
| this.formConfig = this.formJsonData || {}; | |
| this.createForm(this.formConfig.layout.rows); | |
| this.cdr.detectChanges(); | |
| this.formInstance.emit(this.form); | |
| } | |
| if (changes.modelData && !changes.formJsonData) { | |
| this.updateFormValues(this.modelData); | |
| } | |
| ngOnChanges(changes: SimpleChanges) { | |
| if (changes['formJsonData']) { | |
| this.formConfig = this['formJsonData'] || {}; | |
| this.createForm(this.formConfig.layout.rows); | |
| this.cdr.detectChanges(); | |
| this.formInstance.emit(this.form); | |
| } | |
| if (changes['modelData'] && !changes['formJsonData']) { | |
| this.updateFormValues(this['modelData']); | |
| } |
Tools
GitHub Check: Build
[failure] 60-60:
Property 'formJsonData' comes from an index signature, so it must be accessed with ['formJsonData'].
[failure] 67-67:
Property 'modelData' comes from an index signature, so it must be accessed with ['modelData'].
[failure] 67-67:
Property 'formJsonData' comes from an index signature, so it must be accessed with ['formJsonData'].
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (2)
- projects/osmosys-form/src/lib/osmosys-form.component.html (1 hunks)
- projects/osmosys-form/src/lib/osmosys-form.component.ts (1 hunks)
Files skipped from review as they are similar to previous changes (2)
- projects/osmosys-form/src/lib/osmosys-form.component.html
- projects/osmosys-form/src/lib/osmosys-form.component.ts
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (1)
- projects/osmosys-form/src/lib/osmosys-form.component.html (1 hunks)
Files skipped from review as they are similar to previous changes (1)
- projects/osmosys-form/src/lib/osmosys-form.component.html
OsmosysForm PR Checklist
Pre-requisites
PR Details
PR details have been updated as per the given format (see below)
feat: add dynamic form validation).Additional Information
ready for reviewshould be added if the PR is ready to be reviewed).Development Specific
ng test) (optional).ng build osmosys-formto ensure the library builds without errors.Description:
Added osmosys form library code.
Added documentaion on usage.
Related changes:
NA
Screenshots:
NA
Pending actions:
NA
Additional notes:
NA
Summary by CodeRabbit
New Features
Documentation
usage.mdfile with extensive documentation for setting up and using the Osmosys Form Library.Style
angular.json,ng-package.json,tsconfig.lib.json,tsconfig.spec.json,tsconfig.json) by removing unnecessary line breaks and spaces.Enhancements
OsmosysFormComponentfunctionality by adding dynamic form creation, value updates, validation, and form reset capabilities.