This component allows you to easily generate dynamic forms in your Angular applications based on a simple model object.
-
Install the component:
//TODO npm install @aymardkouakou/dynamic-form-component --save
-
Import the component module into your Angular module:
import { DynamicFormComponent } from '@aymardkouakou/dynamic-form-component'; @Component({ standalone: true, imports: [ // ... your other modules DynamicFormComponent ], // ... }) export class YourComponent { }
-
Define your form model:
import { DynamicFormModel, DynamicFormField } from '@aymardkouakou/dynamic-form-component'; const myFormModel: DynamicFormModel = { name: { label: 'Name', type: 'text', validations: [Validators.required] }, email: { label: 'Email', type: 'email', validations: [Validators.required, Validators.email] }, message: { label: 'Message', type: 'textarea' } };
-
Use the component in your template:
<app-dynamic-form [with-model]="myFormModel" [with-submit-button-text]="'Send'" (on-submit)="handleSubmit($event)" ></app-dynamic-form>
-
Handle form submission:
handleSubmit(formData: any) { console.log('Form data:', formData); // Send form data to your backend }
The following field types are currently supported:
text
email
password
select
//TODOtextarea
number
date
Contributions are welcome! If you find any issues or have suggestions for improvement, please open an issue or submit a pull request on GitHub.
Additional Tips for Encouraging Contributions:
- Clear README: Provide clear and concise documentation in your README file.
- Examples: Include a comprehensive example application in your repository that demonstrates different use cases and features.
- Code Style and Comments: Follow consistent code style guidelines and add helpful comments to make your code easy to understand.
- Tests: Write unit tests to ensure the quality of your code and make it easier for others to contribute without introducing regressions.
- Open Issues: Be proactive in identifying and opening issues for known limitations or areas for improvement.
- Welcome New Contributors: Respond to issues and pull requests promptly and provide a welcoming and inclusive environment for new contributors.
By following these suggestions, you can make your dynamic form component more appealing to other developers and encourage them to use and contribute to your project.