ngx-mat-input-tel 20.5.1 → 20.6.0
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 +7 -6
- package/fesm2022/ngx-mat-input-tel.mjs +574 -306
- package/fesm2022/ngx-mat-input-tel.mjs.map +1 -1
- package/index.d.ts +20 -14
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -65,7 +65,7 @@ Refer to main app in this repository for working example.
|
|
|
65
65
|
|
|
66
66
|
<form #f="ngForm" [formGroup]="phoneForm">
|
|
67
67
|
<ngx-mat-input-tel
|
|
68
|
-
[preferredCountries]="['
|
|
68
|
+
[preferredCountries]="['US', 'GB']"
|
|
69
69
|
[enablePlaceholder]="true"
|
|
70
70
|
[enableSearch]="true"
|
|
71
71
|
name="phone"
|
|
@@ -81,15 +81,15 @@ If you want to show the sample number for the country selected or errors , use m
|
|
|
81
81
|
```html
|
|
82
82
|
<form #f="ngForm" [formGroup]="phoneForm">
|
|
83
83
|
<ngx-mat-input-tel
|
|
84
|
-
[preferredCountries]="['
|
|
85
|
-
[onlyCountries]="['
|
|
84
|
+
[preferredCountries]="['US', 'GB']"
|
|
85
|
+
[onlyCountries]="['US', 'GB', 'ES']"
|
|
86
86
|
[enablePlaceholder]="true"
|
|
87
87
|
name="phone"
|
|
88
88
|
autocomplete="tel"
|
|
89
89
|
formControlName="phone"
|
|
90
90
|
#phone
|
|
91
91
|
></ngx-mat-input-tel>
|
|
92
|
-
<mat-hint>e.g. {{phone
|
|
92
|
+
<mat-hint>e.g. {{phone.$selectedCountry().placeholder}}</mat-hint>
|
|
93
93
|
<mat-error *ngIf="f.form.controls['phone']?.errors?.required">Required Field</mat-error>
|
|
94
94
|
<mat-error *ngIf="f.form.controls['phone']?.errors?.validatePhoneNumber"
|
|
95
95
|
>Invalid Number</mat-error
|
|
@@ -101,16 +101,17 @@ If you want to show the sample number for the country selected or errors , use m
|
|
|
101
101
|
|
|
102
102
|
| Options | Type | Default | Description |
|
|
103
103
|
| ------------------ | ------------------------- | ---------------- | ----------------------------------------------------------------------------------- |
|
|
104
|
-
| autocomplete | `off` \| `tel` | `off` | For input autocompletion |
|
|
105
104
|
| ariaLabel | `string` | `Select country` | Aria label for the country selector button |
|
|
105
|
+
| autocomplete | `off` \| `tel` | `off` | For input autocompletion |
|
|
106
106
|
| cssClass | `string` | `undefined` | If input custom class are needed |
|
|
107
|
+
| countriesName | `Record<string, string>` | `COUNTRIES_NAME` | For using different country names in the dropdown (Eg. Multilingual website) |
|
|
107
108
|
| defaultCountry | `CountryCode` | `undefined` | Default country code |
|
|
108
109
|
| enablePlaceholder | `boolean` | `false` | Input placeholder text, which adapts to the country selected. |
|
|
109
110
|
| enableSearch | `boolean` | `false` | Whether to display a search bar to help filter down the list of countries |
|
|
110
111
|
| format | `string` \*\*\*\* | `default` | Format of "as you type" input. Possible values: national, international, default |
|
|
111
|
-
| placeholder | `string` | `undefined` | Placeholder for the input component. |
|
|
112
112
|
| maxLength | `number` | `15` | max length of the input. |
|
|
113
113
|
| onlyCountries | `string[]` | `[]` | List of manually selected country abbreviations, which will appear in the dropdown. |
|
|
114
|
+
| placeholder | `string` | `undefined` | Placeholder for the input component. |
|
|
114
115
|
| preferredCountries | `string[]` | `[]` | List of country abbreviations, which will appear at the top. |
|
|
115
116
|
| resetOnChange | `boolean` | `false` | Reset input on country change |
|
|
116
117
|
| searchPlaceholder | `string` | `Search ...` | Placeholder for the search input |
|