📇 Index

• 📄 Description
• 📦 Installation
  • 📋 Prerequisites
  • 📥 Install Pro Form Components
• 💻 Usage
• 🔄 Compatibility
• 🔨 Development
• ⚖️ Licensing
• 🏁 Wrapping Up

📄 Description

This project provides a collection of custom, reactive form components built upon Angular Material. Designed for seamless integration into any Angular application, these components help standardize the look and feel of forms across your project(s). They offer features such as automatic scrolling to errors, highlighting invalid fields on touch or submit, focusing on problematic inputs to enhance usability, etc. By promoting the consistent use of hints, labels, and error messages, these components improve not only developer but user experience alike.

Also included is an example form to demonstrate the usage of each component. This form is built using the Angular Reactive Forms approach and includes custom validators, error messages, hints, labels, and more. The example form is designed to be a starting point for your own forms, providing a solid foundation to build upon. It takes a mobile-first approach, ensuring that the form is responsive and accessible across all devices with minimal effort using breakpoints.

The components included in this project are:

• InputComponent: A generic input field that can be used for text, email, password, etc.
• InputCheckboxComponent: A checkbox input field.
• InputChipsComponent: A chips list input field.
• InputChipComponent: A chip element for the chips list input field.
• InputDatepickerComponent: A datepicker input field.
• InputDropdownComponent: A dropdown list input field.
• InputDropdownOptionComponent: An option element for the dropdown list input field.
• InputDropdownOptionGroupComponent: An option group element for the dropdown list input field.
• InputRadioComponent: A radio input options field.
• InputRadioOptionComponent: An option element for the radio input field.
• InputTextareaComponent: A textarea input field.
• InputTimepickerComponent: A timepicker input field.
• InputToggleComponent: A toggle input field.

Each component is designed to be easily customized and extended to meet your specific needs. They are built using Angular Material and Angular CDK, ensuring that they are accessible, responsive, and performant.

📦 Installation

Using Node Package Manager (NPM) in a new terminal window run the following commands to install the required dependencies.

📋 Prerequisites

Angular Material

More information on theming Angular Material: https://material.angular.io/guide/theming

ng add @angular/material

📥 Install Pro Form Components

ng add @proangular/pro-form@latest

or

npm install @proangular/pro-form --save

💻 Usage

Import one or all of the following custom form components to use in your Angular application where used:

+ import {
+   InputComponent,
+   InputCheckboxComponent,
+   InputChipComponent,
+   InputChipsComponent,
+   InputDatepickerComponent,
+   InputDropdownComponent,
+   InputDropdownOptionComponent,
+   InputDropdownOptionGroupComponent,
+   InputRadioComponent,
+   InputRadioOptionComponent,
+   InputTextareaComponent,
+   InputTimepickerComponent,
+   InputToggleComponent,
+ } from '@proangular/pro-form';

// Import to module
@NgModule({
  ...
  imports: [
+   InputComponent,
+   InputCheckboxComponent,
+   InputChipComponent,
+   InputChipsComponent,
+   InputDatepickerComponent,
+   InputDropdownComponent,
+   InputDropdownOptionComponent,
+   InputDropdownOptionGroupComponent,
+   InputRadioComponent,
+   InputRadioOptionComponent,
+   InputTextareaComponent,
+   InputTimepickerComponent,
+   InputToggleComponent,
    ...
  ],
})

...

// Or import to a standalone component
@Component({
  ...
  imports: [
+   InputComponent,
+   InputCheckboxComponent,
+   InputChipComponent,
+   InputChipsComponent,
+   InputDatepickerComponent,
+   InputDropdownComponent,
+   InputDropdownOptionComponent,
+   InputDropdownOptionGroupComponent,
+   InputRadioComponent,
+   InputRadioOptionComponent,
+   InputTextareaComponent,
+   InputTimepickerComponent,
+   InputToggleComponent,
    ...
  ],
})

...

// Then use in template, simplified example form below:
+ <form [formGroup]="formGroup">
+   <pro-input [formControl]="formGroup.controls.input" ... />
+   <pro-input-checkbox [formControl]="formGroup.controls.checkbox" ... />
+   <pro-input-chips [formControl]="formGroup.controls.chips" ... />
+   <pro-input-datepicker [formControl]="formGroup.controls.datepicker" ... />
+   <pro-input-dropdown [formControl]="formGroup.controls.dropdown" ... />
+   <pro-input-radio [formControl]="formGroup.controls.radio" ... />
+   <pro-input-textarea [formControl]="formGroup.controls.textarea" ... />
+   <pro-input-timepicker [formControl]="formGroup.controls.timepicker" ... />
+   <pro-input-toggle [formControl]="formGroup.controls.toggle" ... />
+ </form>

See an the example form code here, or a live demo here.

🔄 Compatibility

| Angular version | @proangular/pro-form | Install | | --------------- | -------------------- | ------------------------------- | | v21 | v21.x.x | ng add @proangular/pro-form@^21 | | v20 | v20.x.x | ng add @proangular/pro-form@^20 | | v19 | v19.x.x | ng add @proangular/pro-form@^19 | | v18 | ------ | Untested | | v17 | ------ | Untested |

🔨 Development

Please submit all issues, and feature requests here: https://github.com/ProAngular/pro-form/issues

Contribution:

1. Clone the repo and create a new branch:

• git clone https://github.com/ProAngular/pro-form.git
• git checkout -b username/feature-or-bug-description

2. Bump up the version of package in package.json and package-lock.json, commit all changes, push.

• git add -A
• git commit -m "My commit message"
• git push origin username/feature-or-bug-description

3. Submit code in published PR for review and approval. Add a good description and link any possible user stories or bugs.

• Create a new pull request.

4. Allow CI actions to completely run and verify files.
5. Add/ping reviewers and await approval.

Thank you for any and all contributions!

⚖️ Licensing

This project is licensed under the MIT License. See the LICENSE file for the pertaining license text.

SPDX-License-Identifier: MIT

🏁 Wrapping Up

Thank you to the entire Angular team and community for such a great framework to build upon. If you have any questions, please let me know by opening an issue here.

| Type | Info | | :---------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------- | | | [email protected] | | | https://github.com/sponsors/CodyTolene | | | https://www.buymeacoffee.com/codytolene | | | bc1qfx3lvspkj0q077u3gnrnxqkqwyvcku2nml86wmudy7yf2u8edmqq0a5vnt |

Fin. Happy programming friend!

Cody Tolene