mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
[ADF-4152] Updated folder structure of core docs (#4415)
* [ADF-4152] Moved core library docs into subfolders * [ADF-4152] Moved core library docs into subfolders * [ADF-4152] Manual fixes to core doc file links * [ADF-4152] Further automatic + manual link tidying
This commit is contained in:
committed by
Eugenio Romano
parent
285e56e9fb
commit
5fc05da7aa
71
docs/core/components/text-mask.component.md
Normal file
71
docs/core/components/text-mask.component.md
Normal file
@@ -0,0 +1,71 @@
|
||||
---
|
||||
Title: Text Mask directive
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
Last reviewed: 2018-11-20
|
||||
---
|
||||
|
||||
# [Text Mask directive](../../../lib/core/form/components/widgets/text/text-mask.component.ts "Defined in text-mask.component.ts")
|
||||
|
||||
Implements text field input masks.
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```html
|
||||
<input [textMask]="{mask: mask, isReversed: isMaskReversed}">
|
||||
```
|
||||
|
||||
## Class members
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| ---- | ---- | ------------- | ----------- |
|
||||
| inputMask | `Function` | | Object defining mask and "reversed" status. |
|
||||
|
||||
## Details
|
||||
|
||||
The Text Mask directive implements the "input mask" feature defined in the
|
||||
Process Services form editor. The mask restricts the way that text data can
|
||||
be added to the field and also adds formatting as you type. A common example of
|
||||
this feature is seen in text boxes that accept credit card numbers. The number is
|
||||
printed on the card as groups of four digits separated by spaces:
|
||||
|
||||
`1234 5678 9012 3456`
|
||||
|
||||
When you type into the field, you can only enter digits and spaces (spaces
|
||||
are only valid if you type them in the position they occur in the mask;
|
||||
otherwise, they are added automatically as you type digits). The equivalent
|
||||
text mask in ADF would be:
|
||||
|
||||
`0000 0000 0000 0000`
|
||||
|
||||
### Mask format characters
|
||||
|
||||
The following characters have special meaning within a mask; all other characters
|
||||
are included in the text as they are:
|
||||
|
||||
- **"0"**: Denotes a digit
|
||||
- **"9"**: Denotes a digit that can optionally be left out
|
||||
- **"A"**: Denotes a alphanumeric character (upper- or lower-case A-Z and digits 0-9)
|
||||
- **"S"**: Denotes a alphabetic character (upper- or lower-case A-Z)
|
||||
- **"#"**: Denotes a string of zero or more digits
|
||||
|
||||
The mask is passed to the directive in the `mask` field of the parameter object. The
|
||||
`reversed` field indicates that digits in the mask are "filled up" in
|
||||
right-to-left order rather than the usual left-to-right. For example, with the
|
||||
following mask:
|
||||
|
||||
`#0.0`
|
||||
|
||||
...if the user typed the digits "23" in sequence, the normal left-to-right ordering
|
||||
would show
|
||||
|
||||
`23`
|
||||
|
||||
...in the textbox. To get the decimal point, the user would have to type it explicitly.
|
||||
However, with reversed (right-to-left) ordering, the textbox would show
|
||||
|
||||
`2.3`
|
||||
|
||||
...and these digits would slide leftward as the user typed more.
|
Reference in New Issue
Block a user