https://github.com/prasadlokhande-880/dynamicformgenration
A dynamic form control prototype that generates customizable, validated forms based on configuration objects in Angular.
https://github.com/prasadlokhande-880/dynamicformgenration
angular debugging formgroup git github validation
Last synced: 11 months ago
JSON representation
A dynamic form control prototype that generates customizable, validated forms based on configuration objects in Angular.
- Host: GitHub
- URL: https://github.com/prasadlokhande-880/dynamicformgenration
- Owner: Prasadlokhande-880
- Created: 2024-07-11T19:35:22.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2024-12-01T06:55:04.000Z (over 1 year ago)
- Last Synced: 2024-12-01T07:29:41.257Z (over 1 year ago)
- Topics: angular, debugging, formgroup, git, github, validation
- Language: TypeScript
- Homepage:
- Size: 195 KB
- Stars: 8
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Here's a sample `README.md` for your dynamic form control prototype project:
---
# Dynamic Form Control Prototype
This 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.
## Features
- **Dynamic Form Generation**: Generate forms based on provided configuration objects.
- **Custom Validators**: Implement both standard and custom validators for fields.
- **Flexible Input Types**: Supports various input types like text, number, date, select dropdowns, and checkboxes.
- **Built-in Validation**: Automatically validates fields based on predefined rules.
- **Extensibility**: Easy to extend with custom form fields, validators, and components.
## Installation
To use this prototype in your project, follow these steps:
1. Clone the repository:
```bash
git clone https://github.com/your-username/dynamic-form-control.git
```
2. Navigate to the project directory:
```bash
cd dynamic-form-control
```
3. Install dependencies:
```bash
npm install
```
## Usage
1. **Import the FormModule**: In your Angular project, import the `FormModule` from the prototype into your application module.
```typescript
import { FormModule } from 'dynamic-form-control';
```
2. **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.
```typescript
const formConfig = [
{
type: 'text',
name: 'firstName',
label: 'First Name',
validation: [Validators.required]
},
{
type: 'number',
name: 'age',
label: 'Age',
validation: [Validators.required, Validators.min(18)]
},
{
type: 'select',
name: 'gender',
label: 'Gender',
options: ['Male', 'Female', 'Other'],
validation: [Validators.required]
}
];
```
3. **Bind the Form**: Use the form configuration in your template to dynamically render the form fields.
```html
```
4. **Handle Form Submission**: The form can be submitted as usual, and the validation status will be managed automatically.
```typescript
onSubmit(formValue) {
if (this.form.valid) {
console.log('Form submitted:', formValue);
}
}
```
## Custom Validators
You can easily add custom validators by creating a validator function that returns a `ValidationErrors` object. Here's an example of a custom email validator:
```typescript
import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';
export function emailValidator(): ValidatorFn {
return (control: AbstractControl): ValidationErrors | null => {
const email = control.value;
const isValidEmail = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/.test(email);
return isValidEmail ? null : { invalidEmail: true };
};
}
```
## Development
To run the development environment locally, follow these steps:
1. Clone the repository and install dependencies (as mentioned above).
2. Run the development server:
```bash
ng serve
```
3. Open your browser and navigate to `http://localhost:4200`.
## Contributing
If 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.
## License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
---
Make sure to adjust any references or instructions specific to your project if needed!