InputControl Directive & Pipe

A lightweight Angular utility for validating, sanitizing and formatting input fields.
Supports:

• Number enforcement
• Decimal control via number:X
• Max decimal places
• Text-only restrictions
• Alphanumeric rules
• Email-safe filtering
• Automatic case formatting
• Masking patterns
• Clean model updates (input view ≠ model value)

Installation

Import into your component/module:

import { InputControlDirective } from 'sds-input-controller';
import { InputControlPipe } from 'sds-input-controller';

Then add:

imports: [InputControlDirective, InputControlPipe]

Usage

Basic

<input inputControl />

Defaults to text.

Number Inputs

Numbers only

<input inputControl="number" />

Prevents:

• letters
• symbols
• typing “30str”

Typing:

30str → 30

Numbers with decimals

<input inputControl="number:2" />

Examples:

• 10.25 → OK
• 10.257 → becomes 10.25
• 10abc → becomes 10

Format:

inputControl="number:<decimalPlaces>"

Text Inputs

Basic text

<input inputControl="text" />

No spaces

<input inputControl="text" [allowSpace]="false" />

Alphanumeric

<input inputControl="alphanumeric" />

Email

<input inputControl="email" />

Invalid characters are removed automatically.

Case Formatting

Options:

• upper
• lower
• capitalize
• none

Example:

<input inputControl="text" formatCase="upper" />

Masking

Mask rules:

• # → digit
• A → letter
• X → letter or digit
• other characters auto-insert (dash, space, slash, etc)

Phone

<input inputControl="number" mask="###-###-####" />

Typing:

0412345678 → 041-234-5678

ABN

<input inputControl="number" mask="## ### ### ###" />

Product Code

<input inputControl="alphanumeric" mask="AA-###-XX" />

Pipe Usage

Import

imports: [InputControlPipe]

Number formatting

{{ value | inputControl:'number':2 }}

Case formatting

{{ 'hello world' | inputControl:'text':0:'upper' }}

Mask formatting

{{ '1234567890' | inputControl:'text':0:'none':'###-###-####' }}

Output:

123-456-7890

API Reference

| Input | Type | Default | Description | |------|------|---------|-------------| | inputControl | "text" | "number[:decimals]" | "email" | "alphanumeric" | text | Primary validation mode | | allowSpace | boolean | true | Allow or block spaces | | formatCase | upper | lower | capitalize | none | none | Auto-case transform | | mask | string | '' | Formatting mask |

Examples

Full numeric example

<input
  inputControl="number:2"
  formatCase="none"
/>

Alphanumeric with mask

<input
  inputControl="alphanumeric"
  mask="AA-###-XX"
/>

Text uppercase without spaces

<input
  inputControl="text"
  [allowSpace]="false"
  formatCase="upper"
/>

Email example

<input inputControl="email" />

Clean Model Values

The directive updates the input visually but does not write formatting into the Angular form model.

Example:

Display: 041-234-5678
Model:   0412345678

This prevents storing formatting characters in the database.

Done

This is a complete single-file README.md, fully updated for:

✔ inputControl="number:2"
✔ Mask support
✔ Case formatting
✔ Clean model sync

Just copy and paste this whole block into README.md.