Pro Angular: Form Components
Preview the live demo below to see the Pro Form Components in action:
https://www.ProAngular.com/demos/pro-form
[ Index ]
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.
[ Index ]
Using Node Package Manager (NPM) in a new terminal window run the following commands to install the required dependencies.
Angular Material
More information on theming Angular Material: https://material.angular.io/guide/theming
ng add @angular/materialng add @proangular/pro-form@latestor
npm install @proangular/pro-form --save[ Index ]
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>
[ Index ]
| Angular version | @proangular/pro-form | Install |
|---|---|---|
| v19 | v19.x.x | ng add @proangular/pro-form@^19 |
| v18 | ------ | Untested |
| v17 | ------ | Untested |
[ Index ]
Please submit all issues, and feature requests here: https://github.com/ProAngular/pro-form/issues
Contribution:
- Clone the repo and create a new branch:
git clone https://github.com/ProAngular/pro-form.gitgit checkout -b username/feature-or-bug-description
- Bump up the version of package in
package.jsonandpackage-lock.json, commit all changes, push.
git add -Agit commit -m "My commit message"git push origin username/feature-or-bug-description
- Submit code in published PR for review and approval. Add a good description and link any possible user stories or bugs.
- Allow CI actions to completely run and verify files.
- Add/ping reviewers and await approval.
Thank you for any and all contributions!
[ Index ]
This project is licensed under the MIT License. See the LICENSE file for the pertaining license text.
SPDX-License-Identifier: MIT
[ Index ]
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