{"id":23162952,"url":"https://github.com/prasadlokhande-880/dynamicformgenration","last_synced_at":"2025-08-18T03:31:58.842Z","repository":{"id":249481109,"uuid":"827507279","full_name":"Prasadlokhande-880/DynamicFormGenration","owner":"Prasadlokhande-880","description":"A dynamic form control prototype that generates customizable, validated forms based on configuration objects in Angular.","archived":false,"fork":false,"pushed_at":"2024-12-01T06:55:04.000Z","size":200,"stargazers_count":8,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-12-01T07:29:41.257Z","etag":null,"topics":["angular","debugging","formgroup","git","github","validation"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Prasadlokhande-880.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-07-11T19:35:22.000Z","updated_at":"2024-12-01T06:56:40.000Z","dependencies_parsed_at":"2024-08-17T21:23:36.888Z","dependency_job_id":"0f64a4bc-0478-4d76-80ba-5a8c167f0c5c","html_url":"https://github.com/Prasadlokhande-880/DynamicFormGenration","commit_stats":null,"previous_names":["prasadlokhande-880/dynamicformgenration"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Prasadlokhande-880%2FDynamicFormGenration","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Prasadlokhande-880%2FDynamicFormGenration/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Prasadlokhande-880%2FDynamicFormGenration/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Prasadlokhande-880%2FDynamicFormGenration/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Prasadlokhande-880","download_url":"https://codeload.github.com/Prasadlokhande-880/DynamicFormGenration/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230198039,"owners_count":18188786,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","debugging","formgroup","git","github","validation"],"created_at":"2024-12-18T00:14:56.030Z","updated_at":"2024-12-18T00:14:56.524Z","avatar_url":"https://github.com/Prasadlokhande-880.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Here's a sample `README.md` for your dynamic form control prototype project:\n\n---\n\n# Dynamic Form Control Prototype\n\nThis project provides a dynamic form control generator prototype, which allows for the creation of customizable, validated forms based on provided configuration objects. The forms are created dynamically using Angular and can be easily integrated into various projects.\n\n## Features\n\n- **Dynamic Form Generation**: Generate forms based on provided configuration objects.\n- **Custom Validators**: Implement both standard and custom validators for fields.\n- **Flexible Input Types**: Supports various input types like text, number, date, select dropdowns, and checkboxes.\n- **Built-in Validation**: Automatically validates fields based on predefined rules.\n- **Extensibility**: Easy to extend with custom form fields, validators, and components.\n\n## Installation\n\nTo use this prototype in your project, follow these steps:\n\n1. Clone the repository:\n\n    ```bash\n    git clone https://github.com/your-username/dynamic-form-control.git\n    ```\n\n2. Navigate to the project directory:\n\n    ```bash\n    cd dynamic-form-control\n    ```\n\n3. Install dependencies:\n\n    ```bash\n    npm install\n    ```\n\n## Usage\n\n1. **Import the FormModule**: In your Angular project, import the `FormModule` from the prototype into your application module.\n\n    ```typescript\n    import { FormModule } from 'dynamic-form-control';\n    ```\n\n2. **Configure the Form**: Define the form configuration in your component as an array of form fields, each containing a field name, type, validation rules, and any other properties.\n\n    ```typescript\n    const formConfig = [\n      {\n        type: 'text',\n        name: 'firstName',\n        label: 'First Name',\n        validation: [Validators.required]\n      },\n      {\n        type: 'number',\n        name: 'age',\n        label: 'Age',\n        validation: [Validators.required, Validators.min(18)]\n      },\n      {\n        type: 'select',\n        name: 'gender',\n        label: 'Gender',\n        options: ['Male', 'Female', 'Other'],\n        validation: [Validators.required]\n      }\n    ];\n    ```\n\n3. **Bind the Form**: Use the form configuration in your template to dynamically render the form fields.\n\n    ```html\n    \u003capp-dynamic-form [fields]=\"formConfig\"\u003e\u003c/app-dynamic-form\u003e\n    ```\n\n4. **Handle Form Submission**: The form can be submitted as usual, and the validation status will be managed automatically.\n\n    ```typescript\n    onSubmit(formValue) {\n      if (this.form.valid) {\n        console.log('Form submitted:', formValue);\n      }\n    }\n    ```\n\n## Custom Validators\n\nYou can easily add custom validators by creating a validator function that returns a `ValidationErrors` object. Here's an example of a custom email validator:\n\n```typescript\nimport { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';\n\nexport function emailValidator(): ValidatorFn {\n  return (control: AbstractControl): ValidationErrors | null =\u003e {\n    const email = control.value;\n    const isValidEmail = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,4}$/.test(email);\n    return isValidEmail ? null : { invalidEmail: true };\n  };\n}\n```\n\n## Development\n\nTo run the development environment locally, follow these steps:\n\n1. Clone the repository and install dependencies (as mentioned above).\n2. Run the development server:\n\n    ```bash\n    ng serve\n    ```\n\n3. Open your browser and navigate to `http://localhost:4200`.\n\n## Contributing\n\nIf you would like to contribute to this project, feel free to fork the repository and submit pull requests. Please ensure that any new features or bug fixes are accompanied by tests.\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n---\n\nMake sure to adjust any references or instructions specific to your project if needed!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprasadlokhande-880%2Fdynamicformgenration","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fprasadlokhande-880%2Fdynamicformgenration","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprasadlokhande-880%2Fdynamicformgenration/lists"}