Shared Directives Library

A collection of reusable Angular directives for common form validation and formatting needs.

Installation

This library is part of the Analink workspace and can be used in any Angular application within the workspace.

Available Directives

Form Validation Directives

formControlError

Displays error messages for form controls when they are invalid and touched/dirty.

<div *formControlError="control; message: 'This field is required'">{{ $implicit }}</div>

requiredInput

Highlights required form inputs when they are invalid.

<input formControlName="name" requiredInput requiredInputClass="error-highlight" requiredInputStyle="border: 2px solid red;" />

Inputs:

• requiredInputClass: CSS class to apply (default: 'required-error')
• requiredInputStyle: Inline styles to apply (default: red border styling)

requiredLabel

Automatically adds a required indicator (*) to labels for required form controls.

<label requiredLabel ng2313RequiredLabel="Email Address"> Email Address </label>

Formatting Directives

emailFormat

Validates email format using a comprehensive regex pattern.

<input formControlName="email" emailFormat />

usdFormat

Formats numeric input as USD currency with proper formatting.

<input formControlName="price" usdFormat />

Features:

• Formats as currency on blur
• Shows raw value on focus for editing
• Handles decimal places correctly
• Removes non-numeric characters during input

phoneNumber

Formats phone numbers with proper formatting for domestic and international numbers.

<input formControlName="phone" phoneNumber />

Formatting:

• Domestic: (123) 456-7890
• International: +1 (234) 567-8901
• Limits to 15 digits (international standard)

zipCode

Formats ZIP codes with proper formatting for 5-digit and ZIP+4 formats.

<input formControlName="zipCode" zipCode />

Formatting:

• 5-digit: 12345
• ZIP+4: 12345-6789

Text Processing Directives

trimWhitespace

Automatically trims whitespace from input values on blur.

<input formControlName="description" trimWhitespace />

upperCase

Converts input text to uppercase as the user types.

<input formControlName="code" upperCase />

Usage Examples

Complete Form Example

<form [formGroup]="userForm">
  <div class="form-group">
    <label requiredLabel ng2313RequiredLabel="Full Name"> Full Name </label>
    <input formControlName="fullName" requiredInput trimWhitespace />
    <div *formControlError="userForm.get('fullName'); message: 'Name is required'">{{ $implicit }}</div>
  </div>

  <div class="form-group">
    <label requiredLabel ng2313RequiredLabel="Email"> Email </label>
    <input formControlName="email" emailFormat requiredInput />
    <div *formControlError="userForm.get('email'); message: 'Valid email is required'">{{ $implicit }}</div>
  </div>

  <div class="form-group">
    <label>Phone Number</label>
    <input formControlName="phone" phoneNumber />
  </div>

  <div class="form-group">
    <label>ZIP Code</label>
    <input formControlName="zipCode" zipCode />
  </div>

  <div class="form-group">
    <label>Price</label>
    <input formControlName="price" usdFormat />
  </div>

  <div class="form-group">
    <label>Product Code</label>
    <input formControlName="productCode" upperCase />
  </div>
</form>

Styling

The directives use CSS classes and inline styles that can be customized:

.required-error {
  border: 2px solid #dc3545;
  background-color: #fff5f5;
}

.fcRequired {
  color: #dc3545;
  font-weight: bold;
}

Best Practices

1. Always use with Reactive Forms: These directives are designed to work with Angular's Reactive Forms
2. Combine directives appropriately: Use multiple directives on the same input when needed
3. Customize styling: Override default styles using the provided input properties
4. Handle errors gracefully: Use the formControlError directive to display user-friendly error messages
5. Test thoroughly: Ensure directives work correctly with your specific use cases

Dependencies

• Angular 19+
• Angular Forms
• Angular Common (for CurrencyPipe)

Contributing

When adding new directives:

1. Follow the existing naming conventions
2. Make directives standalone
3. Include proper TypeScript typing
4. Add comprehensive error handling
5. Update this README with usage examples
6. Test with various edge cases