ngx-simple-forms-utils

ngx-simple-forms-utils is a simple yet powerful Angular library that provides utility directives to enhance the usability and development speed of Angular forms. It includes directives for auto-focusing input fields, automatically formatting text, and conditionally applying validations, among others.

Features

• Auto-Focus Directive (ngxAutoFocus): Automatically focuses an input field when the view is initialized, improving user experience.
• Format Directive (ngxFormat): Formats the input text according to specified formats like uppercase, lowercase, phone, or number.
• Conditional Validation Directive: Apply form field validations conditionally based on the state of other form controls.

Installation

Install the package via npm:

npm install ngx-simple-forms-utils

Usage

Import the Module Import NgxSimpleFormsUtilsModule in your Angular module:

Using the Directives

Auto-Focus Directive

Auto-Focus Directive: Automatically focus on an input field when the component is loaded <input type="text" ngxAutoFocus />

Format Directive

Format Directive: Automatically format the input text to uppercase, lowercase, or apply custom phone/number formatting <input type="text" ngxFormat="uppercase" /> <input type="text" ngxFormat="phone" />

Conditional Validation Directive

Conditional Validation Directive: You can create a similar directive to apply validations conditionally. Below is a placeholder for future improvements <input type="text" [required]="isRequiredCondition()" />

Examples

Auto-Focus Example <form><input type="text" ngxAutoFocus placeholder="This field will be focused automatically" /> </form>

Format Example

<form>
  <input type="text" ngxFormat="uppercase" placeholder="This text will be converted to uppercase" />
  <input type="text" ngxFormat="phone" placeholder="Format as a phone number" />
</form>