Skip to content

This component allows you to easily generate dynamic forms in your Angular 18+ applications based on a simple model object.

Notifications You must be signed in to change notification settings

aymardkouakou/dynamic-form-component-angular

Repository files navigation

Dynamic Form Component for Angular

This component allows you to easily generate dynamic forms in your Angular applications based on a simple model object.

Installation

  1. Install the component:

    //TODO
    npm install @aymardkouakou/dynamic-form-component --save
  2. 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 { }

Usage

  1. 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'
      }
    };
  2. Use the component in your template:

    <app-dynamic-form
      [with-model]="myFormModel"
      [with-submit-button-text]="'Send'"
      (on-submit)="handleSubmit($event)"
    ></app-dynamic-form>
  3. Handle form submission:

    handleSubmit(formData: any) {
      console.log('Form data:', formData);
      // Send form data to your backend
    }

Available Field Types

The following field types are currently supported:

  • text
  • email
  • password
  • select //TODO
  • textarea
  • number
  • date

Contributing

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.

About

This component allows you to easily generate dynamic forms in your Angular 18+ applications based on a simple model object.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published