ngx-smart-forms is a collection of Angular libraries designed to enhance form handling and validation in Angular applications. Each library in this workspace offers specific functionality aimed at simplifying form creation, validation, and error display, while providing advanced customization and performance optimizations.
The ngx-smart-forms project is a unified workspace containing multiple Angular libraries that provide tools for creating efficient, user-friendly forms. These libraries cover everything from error display components, customizable inputs, to dynamic form builders and advanced file upload capabilities.
The main goal of this project is to deliver reusable and easily customizable form components that work well in real-world production environments.
The @ngx-smart-forms/smart-input-type is a powerful Angular directive that enhances native HTML input elements with advanced validation and formatting capabilities.
- Key Features:
- Enforces various input types and custom regex patterns.
- Integrates with native HTML input types and reactive forms.
- Supports case transformation and language-specific character sets.
- Provides clear error visibility through automatic CSS class application.
For more details, see the full README.
The @ngx-smart-forms/smart-error-display is a robust Angular component for displaying form validation errors. It supports both reactive and template-driven forms, offering localization, theming, and custom error handling.
- Key Features:
- Works with reactive and template-driven forms.
- Customizable error messages and themes.
- Supports translation services for i18n.
- Integrates with analytics for error logging.
For more details, see the full README.
The @ngx-smart-forms/smart-file-upload is an Angular component that simplifies file uploading in forms. It provides a customizable file upload interface with support for file previews, validation, drag-and-drop functionality, and customizable themes.
- Key Features:
- Supports drag-and-drop file uploads.
- Validates file types, sizes, and image dimensions.
- Offers customizable previews and lazy loading for images.
- Fully customizable styles and themes (light, dark, custom).
- Works seamlessly with Angular reactive and template-driven forms.
For more details, see the full README.
The @ngx-smart-forms/smart-selector is a dynamic Angular component for selecting options from lists or grids. It offers multiple selection modes, keyboard navigation, accessibility support, and customizable templates.
- Key Features:
- Supports both single and multi-select modes.
- Keyboard navigation with arrow keys and Enter key selection.
- Fully customizable option templates.
- Provides ARIA support for accessibility.
- Integrates seamlessly with Angular reactive and template-driven forms.
- Allows list or grid layout with flexible theming.
For more details, see the full README.
This section explains how to get started with the ngx-smart-forms libraries in your Angular projects.
You can install any of the libraries from the ngx-smart-forms workspace using npm or yarn.
For example, to install the smart-selector library:
npm install @ngx-smart-forms/smart-error-displayOr using Yarn:
yarn add @ngx-smart-forms/smart-error-displayAfter installing the libraries, you can import and use them in your Angular components. Below is an example of how to use the smart-error-display component in a form.
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { SmartErrorDisplay } from '@ngx-smart-forms/smart-error-display';
@Component({
standalone: true,
imports: [SmartErrorDisplay],
templateUrl: './my-form.component.html',
})
export class MyFormComponent {
form: FormGroup;
constructor(private fb: FormBuilder) {
this.form = this.fb.group({
username: ['', Validators.required],
email: ['', [Validators.required, Validators.email]],
});
}
}<form [formGroup]="form">
<input formControlName="username" placeholder="Username" />
<smart-error-display [control]="form.get('username')"></smart-error-display>
<input formControlName="email" placeholder="Email" />
<smart-error-display [control]="form.get('email')"></smart-error-display>
</form>
</form>For detailed usage instructions for each library, see their individual README.md files inside the respective libs/ directories.
This project follows the Nx monorepo structure for managing multiple libraries. The main components of the workspace are:
- apps/: Contains the demo applications that showcase the usage of the libraries.
- libs/: Contains the individual libraries (e.g., smart-error-display).
- node_modules/: Standard Node.js dependencies.
- package.json: Central package manager configuration for the workspace.
- nx.json: Nx configuration for the workspace.
To build all the libraries in the workspace, run the following command:
npm run buildTo build a specific library (e.g., smart-error-display):
npm run build:smart-error-displayTo run the unit tests for all libraries:
npm run testTo run tests for a specific library (e.g., smart-error-display):
npm run test:smart-error-displayThere is a demo application located in the apps/ngx-smart-forms/ directory that showcases how to use the libraries. You can run this app to see the libraries in action:
npm run startWe welcome contributions from the community! If you're interested in contributing to the project, please check out the CONTRIBUTING.md file in the root of the repository.
How to Contribute:
- Fork the repository.
- Create a feature branch.
- Make your changes and commit with meaningful messages.
- Open a pull request with a description of your changes.
If you encounter any issues or have questions, feel free to create an issue on GitHub.
This project is licensed under the MIT License. See the LICENSE file for more details.