mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
[ADF-1586] Added Core doc files (#2681)
* [ADF-1586] Added core doc files * [ADF-1586] Added core doc files
This commit is contained in:
committed by
Eugenio Romano
parent
470fc68db7
commit
bf6d0284e0
67
docs/text-mask.component.md
Normal file
67
docs/text-mask.component.md
Normal file
@@ -0,0 +1,67 @@
|
||||
# Text Mask directive
|
||||
|
||||
Implements text field input masks.
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```html
|
||||
<input [textMask]="{mask: mask, isReversed: isMaskReversed}">
|
||||
```
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| textMask | any | | 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.
|
||||
|
||||
<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
|
||||
<!-- seealso start -->
|
||||
|
||||
<!-- seealso end -->
|
Reference in New Issue
Block a user