Skip to content

Commit 0030e12

Browse files
EugenoNepipenkoIgor
Eugeno
authored and
NepipenkoIgor
committed
Update README.md (JsDaddy#596)
1 parent 6b098f0 commit 0030e12

File tree

1 file changed

+90
-118
lines changed

1 file changed

+90
-118
lines changed

‎README.md‎

Lines changed: 90 additions & 118 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
[![Build Status](https://img.shields.io/travis/JsDaddy/ngx-mask.svg?branch=develop)](https://travis-ci.org/JsDaddy/ngx-mask)
66
[![npm](https://img.shields.io/npm/v/ngx-mask.svg)](https://www.npmjs.com/package/ngx-mask)
77
<a href="https://npmjs.org/ngx-mask">
8-
<img src="https://img.shields.io/npm/dt/ngx-mask.svg" alt="npm downloads" >
8+
<img src="https://img.shields.io/npm/dt/ngx-mask.svg" alt="npm downloads">
99
</a>
1010

1111
[![npm](https://img.shields.io/npm/dm/ngx-mask.svg)](https://www.npmjs.com/package/ngx-mask)
@@ -15,24 +15,21 @@
1515
[![GitHub stars](https://img.shields.io/github/stars/JSDaddy/ngx-mask.svg?label=GitHub%20Stars&style=flat-square)](https://github.com/JSDaddy/ngx-mask)
1616

1717

18-
You can also try our NGX LOADER INDICATOR [Download](https://www.npmjs.com/package/ngx-loader-indicator) it.
19-
You can also try our NGX COPYPASTE [Download](https://www.npmjs.com/package/ngx-copypaste) it.
20-
18+
You can also try our [NGX LOADER INDICATOR](https://www.npmjs.com/package/ngx-loader-indicator).
19+
You can also try our [NGX COPYPASTE](https://www.npmjs.com/package/ngx-copypaste).
2120

2221
### You can see the full [documentation](https://jsdaddy.github.io/ngx-mask-page/) with examples.
2322

2423
## Installing
25-
2624
```bash
2725
$ npm install --save ngx-mask
2826
```
2927

3028
## Quickstart
31-
3229
Import **ngx-mask** module in Angular app.
3330

3431
```typescript
35-
import {NgxMaskModule} from 'ngx-mask'
32+
import { NgxMaskModule } from 'ngx-mask'
3633

3734
export const options: Partial<IConfig> | (() => Partial<IConfig>);
3835

@@ -48,21 +45,18 @@ export const options: Partial<IConfig> | (() => Partial<IConfig>);
4845
Then, just define masks in inputs.
4946

5047
#### Usage
51-
5248
```html
53-
<input type='text' mask='{here comes your mask}' >
49+
<input type="text" mask="{here comes your mask}">
5450
```
5551

56-
Also you can use mask pipe
52+
Also, you can use mask pipe.
5753

5854
#### Usage
59-
6055
```html
6156
<span>{{phone | mask: '(000) 000-0000'}}</span>
6257
```
6358

6459
#### Examples
65-
6660
| mask | example |
6761
| -------------- | -------------- |
6862
| 9999-99-99 | 2017-04-15 |
@@ -72,39 +66,38 @@ Also you can use mask pipe
7266
| SSSS | asDF |
7367

7468
## Mask Options
75-
You can define your custom options for all directives (as object in the mask module) or for each (as attributes for directive). If you override this parameter, you have to provide all the special characters (default one are not included).
69+
You can define your custom options for all directives (as object in the mask module) or for each (as attributes for directive). If you override this parameter, you have to provide all the special characters (default one are not included).
70+
7671
### specialCharacters (string[ ])
77-
We have next default characters:
78-
79-
| character |
80-
|-----------|
81-
| / |
82-
| ( |
83-
| ) |
84-
| . |
85-
| : |
86-
| - |
87-
| **space** |
88-
| + |
89-
| , |
90-
| @ |
72+
We have next default characters:
73+
74+
| character |
75+
|-----------|
76+
| / |
77+
| ( |
78+
| ) |
79+
| . |
80+
| : |
81+
| - |
82+
| **space** |
83+
| + |
84+
| , |
85+
| @ |
9186

9287
##### Usage
93-
9488
```html
95-
<input type='text' [specialCharacters]="[ '[' ,']' , '\\' ]" mask="[00]\[000]" >
89+
<input type="text" [specialCharacters]="[ '[' ,']' , '\\' ]" mask="[00]\[000]">
9690
```
9791

98-
##### Then:
99-
92+
##### Then
10093
```
10194
Input value: 789-874.98
10295
Masked value: [78]\[987]
10396
```
10497
```typescript
10598
patterns ({ [character: string]: { pattern: RegExp, optional?: boolean})
10699
```
107-
We have next default patterns:
100+
We have next default patterns:
108101
109102
| code | meaning |
110103
| ----- | ------------------------------------------- |
@@ -113,157 +106,140 @@ patterns ({ [character: string]: { pattern: RegExp, optional?: boolean})
113106
| **A** | letters (uppercase or lowercase) and digits |
114107
| **S** | only letters (uppercase or lowercase) |
115108
116-
##### Usage:
117-
109+
##### Usage
118110
```html
119-
<input type='text' [patterns]="customPatterns" mask="(000-000)" >
111+
<input type="text" [patterns]="customPatterns" mask="(000-000)">
120112
```
113+
121114
and in your component
122115
123116
```typescript
124-
public customPatterns = {'0': { pattern: new RegExp('\[a-zA-Z\]')}};
117+
public customPatterns = { '0': { pattern: new RegExp('\[a-zA-Z\]')} };
125118
```
126119
127-
##### Then:
128-
120+
##### Then
129121
```
130122
Input value: 789HelloWorld
131123
Masked value: (Hel-loW)
132124
```
133125
134126
### Custom pattern for this
135-
You can define custom pattern and specify symbol to be rendered in input field.
127+
You can define custom pattern and specify symbol to be rendered in input field.
136128
137129
```typescript
138-
pattern = {
139-
'B': {
140-
pattern: new RegExp('\\d'),
141-
symbol: 'X'
142-
}
130+
pattern = {
131+
'B': {
132+
pattern: new RegExp('\\d'),
133+
symbol: 'X'
143134
}
135+
}
144136
```
145137
146138
### prefix (string)
147-
You can add prefix to you masked value
148-
##### Usage
139+
You can add prefix to you masked value
149140
141+
##### Usage
150142
```html
151-
<input type='text' prefix="+7 " mask="(000) 000 00 00" >
143+
<input type="text" prefix="+7 " mask="(000) 000 00 00">
152144
```
153145
154146
### suffix (string)
155-
You can add suffix to you masked value
156-
##### Usage
147+
You can add suffix to you masked value
157148
149+
##### Usage
158150
```html
159-
<input type='text' suffix=" $" mask="0000" >
151+
<input type="text" suffix=" $" mask="0000">
160152
```
161153
162154
### dropSpecialCharacters (boolean)
163-
You can choose if mask will drop special character in the model, or not, default value true
164-
##### Usage
155+
You can choose if mask will drop special character in the model, or not, default value is `true`.
165156
157+
##### Usage
166158
```html
167-
<input type='text' [dropSpecialCharacters]="false" mask="000-000.00" >
159+
<input type="text" [dropSpecialCharacters]="false" mask="000-000.00">
168160
```
169161
170-
##### Then:
171-
162+
##### Then
172163
```
173164
Input value: 789-874.98
174165
Model value: 789-874.98
175166
```
176167
177168
### showMaskTyped (boolean)
178-
You can choose if mask is shown while typing, or not, default value false
179-
##### Usage
169+
You can choose if mask is shown while typing, or not, default value is `false`.
180170
171+
##### Usage
181172
```html
182-
<input mask="(000) 000-0000" prefix="+7" [showMaskTyped] = "true">
173+
<input mask="(000) 000-0000" prefix="+7" [showMaskTyped]="true">
183174
```
184175
185176
### placeHolderCharacter (string)
186-
187-
If the `showMaskTyped` parameter is enabled, this setting customizes the character used as placeholder. Default value is '_'.
177+
If the `showMaskTyped` parameter is enabled, this setting customizes the character used as placeholder. Default value is `_`.
188178
189179
##### Usage
190-
191180
```html
192-
<input mask="(000) 000-0000" prefix="+7" [showMaskTyped] = "true" placeHolderCharacter="*">
181+
<input mask="(000) 000-0000" prefix="+7" [showMaskTyped]="true" placeHolderCharacter="*">
193182
```
194183
195184
### clearIfNotMatch (boolean)
196-
You can choose clear the input if the input value **not match** the mask, default value false
185+
You can choose clear the input if the input value **not match** the mask, default value is `false`.
197186
198187
### Pipe with mask expression and custom Pattern ([string, pattern])
199-
You can pass array of expression and custom Pattern to pipe
188+
You can pass array of expression and custom Pattern to pipe.
200189
201190
##### Usage
202-
203191
```html
204-
<span>{{phone | mask: customMaska}}</span>
192+
<span>{{phone | mask: customMask}}</span>
205193
```
194+
206195
and in your component
207-
```
208-
customMaska: [string, pattern];
196+
```typescript
197+
customMask: [string, pattern];
209198

210-
pattern = {
211-
'P': {
212-
pattern: new RegExp('\\d'),
213-
}};
199+
pattern = {
200+
'P': {
201+
pattern: new RegExp('\\d'),
202+
}
203+
};
214204

215-
this.customMaska = ['PPP-PPP', this.pattern];
205+
this.customMask = ['PPP-PPP', this.pattern];
216206
```
217207
218208
### Repeat mask
219-
You can pass into mask pattern with brackets
209+
You can pass into mask pattern with brackets.
220210
221211
##### Usage
222-
223212
```html
224-
<input type='text' mask="A{4}">
213+
<input type="text" mask="A{4}">
225214
```
226215
227216
### Thousand separator
228-
You can devide your input by thousands
217+
You can divide your input by thousands.
229218
230219
##### Usage
231-
232220
```html
233-
<input type='text' mask="separator">
221+
<input type="text" mask="separator">
234222
```
235-
For separate input with dots
236223
224+
For separate input with dots
237225
```html
238-
<input type='text' mask="dot_separator">
226+
<input type="text" mask="dot_separator">
239227
```
240-
For using decimals enter '.' to the end of your input to 'separator' mask and ',' to 'dot_separator'
241228
229+
For separate input with commas
242230
```html
243-
<input type='text' mask="comma_separator">
244-
```
245-
For using decimals enter '.' to the end of your input to 'separator' or 'comma_separator' mask and ',' to 'dot_separator'
246-
247-
248-
```
249-
Input value: 1234.56
250-
Masked value: 1 234.56
251-
252-
Input value: 1234,56
253-
Masked value: 1.234,56
254-
255-
Input value: 1234.56
256-
Masked value: 1,234.56
231+
<input type="text" mask="comma_separator">
257232
```
258233
234+
For using decimals enter `.` to the end of your input to 'separator' or 'dot_separator' mask and `,` to 'comma_separator'.
259235
```html
260-
<input type='text' mask="dot_separator.2">
261-
<input type='text' mask="comma_separator.2">
262-
<input type='text' mask="dot_separator.0">
263-
<input type='text' mask="comma_separator.0">
236+
<input type="text" mask="dot_separator.2">
237+
<input type="text" mask="comma_separator.2">
238+
<input type="text" mask="dot_separator.0">
239+
<input type="text" mask="comma_separator.0">
264240
```
265-
For limiting decimal precision add '.' and the precision you want to limit too on the input. 2 is useful for currency. 0 will prevent decimals completely.
266241
242+
For limiting decimal precision add `.` and the precision you want to limit too on the input. **2** is useful for currency. **0** will prevent decimals completely.
267243
```
268244
Input value: 1234,56
269245
Masked value: 1.234,56
@@ -277,55 +253,51 @@ Masked value: 1.234
277253
Input value: 1234.56
278254
Masked value: 1,234
279255
```
256+
257+
For limiting the number of digits before the decimal point you can set `separatorLimit` value to _10_, _100_, _1000_, etc.
280258
```html
281-
<input type='text' mask="dot_separator.2" separatorLimit="1000">
259+
<input type="text" mask="dot_separator.2" separatorLimit="1000">
282260
```
283-
For limiting the number of digits before the decimal point you can set `separatorLimit` value to _10_, _100_, _1000_ etc.
284-
285261
```
286262
Input value: 12345678,56
287263
Masked value: 1.234,56
288264
```
289265

290266
### Time validation
291-
You can validate your input as 24 hour format
267+
You can validate your input as 24-hour format.
292268

293269
##### Usage
294-
295270
```html
296-
<input type='text' mask="Hh:m0:s0">
271+
<input type="text" mask="Hh:m0:s0">
297272
```
298273

299274
### Percent validation
300-
You can validate your input for percents
275+
You can validate your input for percents.
301276

302277
##### Usage
303-
304278
```html
305-
<input type='text' mask="percent" suffix="%">
279+
<input type="text" mask="percent" suffix="%">
306280
```
307281

308282
### FormControl validation
309-
You can validate your formControl, default value is true
283+
You can validate your `formControl`, default value is `true`.
310284

311285
##### Usage
312-
313286
```html
314-
<input type='text' mask="00 00" [validation]="true">
287+
<input type="text" mask="00 00" [validation]="true">
315288
```
289+
316290
### Secure input
317-
You can hide symbols in input field and get the actual value in formcontrol
291+
You can hide symbols in input field and get the actual value in `formControl`.
318292

319293
##### Usage
320-
321294
```html
322-
<input matInput placeholder="Secure input" [hiddenInput]="true" mask="XXX/X0/0000">
295+
<input matInput placeholder="Secure input" [hiddenInput]="true" mask="XXX/X0/0000">
323296
```
324297

325298
### IP valid mask
326299

327300
##### Usage
328-
329301
```html
330-
<input mask="IP">
302+
<input mask="IP">
331303
```

0 commit comments

Comments
 (0)