ngxsmk-tel-input 1.4.5 → 1.4.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +22 -4
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -26,6 +26,8 @@ Wraps [`intl-tel-input`](https://github.com/jackocnr/intl-tel-input) for the UI
|
|
|
26
26
|
* SSR‑friendly (no `window` on the server)
|
|
27
27
|
* Easy theming via CSS variables
|
|
28
28
|
* Nice UX options: label/hint/error text, sizes, variants, clear button, autofocus, select-on-focus
|
|
29
|
+
* New: Masking & caret-friendly as-you-type formatting (optional)
|
|
30
|
+
* New: Format only when valid (formatWhenValid) and lock once valid (lockWhenValid) to prevent extra digits
|
|
29
31
|
|
|
30
32
|
---
|
|
31
33
|
|
|
@@ -97,7 +99,7 @@ import { NgxsmkTelInputComponent, IntlTelI18n, CountryMap } from 'ngxsmk-tel-inp
|
|
|
97
99
|
imports: [ReactiveFormsModule, NgxsmkTelInputComponent, JsonPipe],
|
|
98
100
|
template: `
|
|
99
101
|
<form [formGroup]="fg" style="max-width:420px;display:grid;gap:12px">
|
|
100
|
-
|
|
102
|
+
<ngxsmk-tel-input
|
|
101
103
|
formControlName="phone"
|
|
102
104
|
label="Phone"
|
|
103
105
|
hint="Include area code"
|
|
@@ -106,9 +108,10 @@ import { NgxsmkTelInputComponent, IntlTelI18n, CountryMap } from 'ngxsmk-tel-inp
|
|
|
106
108
|
[preferredCountries]="['US','GB','AU']"
|
|
107
109
|
[i18n]="enLabels"
|
|
108
110
|
[localizedCountries]="enCountries"
|
|
109
|
-
[
|
|
110
|
-
[
|
|
111
|
-
|
|
111
|
+
[separateDialCode]="true" <!-- dial code after the flag -->
|
|
112
|
+
[formatWhenValid]="'typing'" <!-- live mask only when valid -->
|
|
113
|
+
[lockWhenValid]="true" <!-- stop extra digits once valid -->
|
|
114
|
+
></ngxsmk-tel-input>
|
|
112
115
|
|
|
113
116
|
<pre>Value: {{ fg.value | json }}</pre>
|
|
114
117
|
</form>
|
|
@@ -239,6 +242,7 @@ Arabic + RTL example
|
|
|
239
242
|
| `utilsScript` | `string` | — | Path/URL to `utils.js` (needed for example placeholders). |
|
|
240
243
|
| `customPlaceholder` | `(example: string, country: any) => string` | — | Transform the example placeholder. |
|
|
241
244
|
| `clearAriaLabel` | `string` | `'Clear phone number'` | ARIA label for the clear button. |
|
|
245
|
+
| `lockWhenValid` | `boolean` | `true` | Prevent appending extra digits once the number is valid (editing/replacing still allowed). |
|
|
242
246
|
|
|
243
247
|
> `CountryCode` is the ISO‑2 uppercase code from `libphonenumber-js` (e.g. `US`, `GB`).
|
|
244
248
|
|
|
@@ -257,6 +261,18 @@ Arabic + RTL example
|
|
|
257
261
|
|
|
258
262
|
---
|
|
259
263
|
|
|
264
|
+
## 🧠 Formatting & validity behavior
|
|
265
|
+
|
|
266
|
+
* No formatting while invalid. As-you-type masking only starts when the digits form a valid number for the selected country.
|
|
267
|
+
|
|
268
|
+
* Sri Lanka / “trunk 0”: a national format may include a leading 0 (e.g., 071…). The emitted E.164 always excludes it (+94 71…)—this is expected.
|
|
269
|
+
|
|
270
|
+
* Lock when valid: with lockWhenValid enabled, once the number is valid, appending more digits is blocked (you can still delete/replace).
|
|
271
|
+
|
|
272
|
+
For rare patterns not covered by libphonenumber-js, the control falls back to raw digits (no forced mask) until it becomes valid.
|
|
273
|
+
|
|
274
|
+
---
|
|
275
|
+
|
|
260
276
|
## 🎨 Theming (CSS variables)
|
|
261
277
|
|
|
262
278
|
Override on the element or a parent container:
|
|
@@ -351,3 +367,5 @@ Clear `.angular/cache`, rebuild the lib, and restart `ng serve`.
|
|
|
351
367
|
|
|
352
368
|
* UI powered by [`intl-tel-input`](https://github.com/jackocnr/intl-tel-input)
|
|
353
369
|
* Parsing & validation by [`libphonenumber-js`](https://github.com/catamphetamine/libphonenumber-js)
|
|
370
|
+
|
|
371
|
+
Last updated: 2025-08-19
|
package/package.json
CHANGED