src="https://raw.githubusercontent.com/ProAngular/pro-form/refs/heads/main/public/images/pro-angular-logo.png"
/>

@proangular/pro-form

ProAngular
  |  

GitHub Repo
  |  

NPM Package
  |  

Demo Page

An abstraction of Angular Material form controls that speeds up form
building with drop in, standalone inputs, unified labels, hints, and
errors, plus helpers like scroll to first error and focus on invalid.
Built for modern Angular and plugs straight into Reactive Forms to cut
boilerplate.

ng add @proangular/pro-form

src="https://raw.githubusercontent.com/ProAngular/pro-form/refs/heads/main/.github/images/screenshots/screenshot.png"
/>

Click here to preview it live!

📇 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.

[ 🔍 Index ]

📦 Installation

Using Node Package Manager ([NPM][url-node-js]) in a new terminal window run the
following commands to install the required dependencies.

$3

Angular Material

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

``bash
ng add @angular/material
`

$3

`bash
ng add @proangular/pro-form@latest
`

or

`bash
npm install @proangular/pro-form --save
`

[ 🔍 Index ]

💻 Usage

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

`diff
+ 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:
+

- 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!

[ 🔍 Index ]

⚖️ Licensing

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

SPDX-License-Identifier: MIT`

[ 🔍 Index ]

🏁 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][url-new-issue].

| Type | Info |
| :---------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------- |
| | webmaster@codytolene.com |
| | https://github.com/sponsors/CodyTolene |
| | https://www.buymeacoffee.com/codytolene |
| | bc1qfx3lvspkj0q077u3gnrnxqkqwyvcku2nml86wmudy7yf2u8edmqq0a5vnt |

Fin. Happy programming friend!

Cody Tolene

[img-info]:
https://raw.githubusercontent.com/ProAngular/pro-form/refs/heads/main/.github/images/ng-icons/info.svg
[url-demo]: https://www.ProAngular.com/demos/pro-form
[url-example-form-code]:
https://github.com/ProAngular/pro-form/blob/main/src/app/form/form.component.html
[url-new-issue]: https://github.com/ProAngular/pro-form/issues
[url-node-js]: https://nodejs.org/