Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Added mask with place holder functionality #464

Open
wants to merge 14 commits into
base: master
Choose a base branch
from
Open

Added mask with place holder functionality #464

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
4cefecb
mask with placeholder functionality added
SalmanQureshi97 Sep 2, 2022
f043788
updated read me
SalmanQureshi97 Sep 2, 2022
8038f2e
Algo converted to use AsYouType formatter, App component updated to a…
SalmanQureshi97 Sep 2, 2022
3bfbb08
separated features
SalmanQureshi97 Sep 5, 2022
cef2abe
updated readme
SalmanQureshi97 Sep 5, 2022
82a5b94
mask with custom only if customPlaceholder not provided == MaskAsYouT…
SalmanQureshi97 Sep 7, 2022
8fa3217
masked inBuilt placeholder with 'X'
SalmanQureshi97 Sep 20, 2022
2836ed6
prepare script
SalmanQureshi97 Sep 20, 2022
e60fb65
removed require for googlePhoneLib, removed prepare script, updated r…
SalmanQureshi97 Sep 20, 2022
2ce757e
fixed typo in readme
SalmanQureshi97 Sep 20, 2022
7c9cd08
add symbol option for noDigitsPlaceholder
SalmanQureshi97 Sep 20, 2022
1f83924
added dynamicMaxLength functionality
SalmanQureshi97 Sep 21, 2022
d7f94f3
small fix to dynamic Max Length
SalmanQureshi97 Sep 21, 2022
47bc224
fix for maskWithPlaceholder
SalmanQureshi97 Sep 29, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
75 changes: 40 additions & 35 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ An Angular package for entering and validating international telephone numbers.
Validation with [google-libphonenumber](https://github.com/ruimarinho/google-libphonenumber)

| ngx-intl-tel-input | Angular | ngx-bootstrap |
| ------------------ |----------------| ------------- |
| ------------------ | -------------- | ------------- |
| 3.x.x | 9.x.x - 13.x.x | 6.0.0 |
| 2.x.x | 8.x.x - 9.1.x | 5.6.x |

Expand Down Expand Up @@ -82,45 +82,50 @@ Or this:

```html
<form #f="ngForm" [formGroup]="phoneForm">
<ngx-intl-tel-input
[cssClass]="'custom'"
[preferredCountries]="[CountryISO.UnitedStates, CountryISO.UnitedKingdom]"
[enableAutoCountrySelect]="false"
[enablePlaceholder]="true"
[searchCountryFlag]="true"
[searchCountryField]="[SearchCountryField.Iso2, SearchCountryField.Name]"
[selectFirstCountry]="false"
[selectedCountryISO]="CountryISO.India"
[maxLength]="15"
[phoneValidation]="true"
[inputId]="my-input-id"
name="phone"
formControlName="phone"
></ngx-intl-tel-input>
<ngx-intl-tel-input
[cssClass]="'custom'"
[preferredCountries]="[CountryISO.UnitedStates, CountryISO.UnitedKingdom]"
[enableAutoCountrySelect]="false"
[enablePlaceholder]="true"
[searchCountryFlag]="true"
[searchCountryField]="[SearchCountryField.Iso2, SearchCountryField.Name]"
[selectFirstCountry]="false"
[selectedCountryISO]="CountryISO.India"
[maxLength]="15"
[phoneValidation]="true"
[inputId]="my-input-id"
name="phone"
formControlName="phone"
></ngx-intl-tel-input>
</form>
```

## Options

| Options | Type | Default | Description |
| ------------------------ | ------------------------ | --------------------------------- | ------------------------------------------------------------------------------------------------------------- |
| cssClass | `string` | `control-form` | Bootstrap input css class or your own custom one. |
| preferredCountries | `<CountryISO>[]` | `[]` | List of countries, which will appear at the top. |
| onlyCountries | `<CountryISO>[]` | `[]` | List of manually selected countries, which will appear in the dropdown. |
| enableAutoCountrySelect | `boolean` | `true` | Toggle automatic country (flag) selection based on user input. |
| enablePlaceholder | `boolean` | `true` | Input placeholder text, which adapts to the country selected. |
| customPlaceholder | `string` | `None` | Custom string to be inserted as a placeholder. |
| numberFormat | `<PhoneNumberFormat>` | `PhoneNumberFormat.International` | Custom string to be inserted as a placeholder. |
| searchCountryFlag | `boolean` | `false` | Enables input search box for countries in the flag dropdown. |
| searchCountryField | `<SearchCountryField>[]` | `[SearchCountryField.All]` | Customize which fields to search in, if `searchCountryFlag` is enabled. Use `SearchCountryField` helper enum. |
| searchCountryPlaceholder | `string` | `'Search Country'` | Placeholder value for `searchCountryField` |
| maxLength | `number` | `None` | Add character limit. |
| selectFirstCountry | `boolean` | `true` | Selects first country from `preferredCountries` if is set. If not then uses main list. |
| phoneValidation | `boolean` | `true` | Disable phone validation. |
| inputId | `string` | `phone` | Unique ID for `<input>` element. |
| selectedCountryISO | `<CountryISO>` | `None` | Set specific country on load. |
| separateDialCode | `boolean` | `false` | Visually separate dialcode into the drop down element. |
| countryChange | `<Country>` | `None` | Emits country value when the user selects a country from the dropdown. |
| Options | Type | Default | Description |
| --------------------------- | ------------------------ | --------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
| cssClass | `string` | `control-form` | Bootstrap input css class or your own custom one. |
| preferredCountries | `<CountryISO>[]` | `[]` | List of countries, which will appear at the top. |
| onlyCountries | `<CountryISO>[]` | `[]` | List of manually selected countries, which will appear in the dropdown. |
| enableAutoCountrySelect | `boolean` | `true` | Toggle automatic country (flag) selection based on user input. |
| enablePlaceholder | `boolean` | `true` | Input placeholder text, which adapts to the country selected. |
| customPlaceholder | `string` | `None` | Custom string to be inserted as a placeholder. |
| numberFormat | `<PhoneNumberFormat>` | `PhoneNumberFormat.International` | Custom string to be inserted as a placeholder. |
| searchCountryFlag | `boolean` | `false` | Enables input search box for countries in the flag dropdown. |
| searchCountryField | `<SearchCountryField>[]` | `[SearchCountryField.All]` | Customize which fields to search in, if `searchCountryFlag` is enabled. Use `SearchCountryField` helper enum. |
| searchCountryPlaceholder | `string` | `'Search Country'` | Placeholder value for `searchCountryField` |
| maxLength | `number` | `None` | Add character limit. |
| selectFirstCountry | `boolean` | `true` | Selects first country from `preferredCountries` if is set. If not then uses main list. |
| phoneValidation | `boolean` | `true` | Disable phone validation. |
| inputId | `string` | `phone` | Unique ID for `<input>` element. |
| selectedCountryISO | `<CountryISO>` | `None` | Set specific country on load. |
| separateDialCode | `boolean` | `false` | Visually separate dialcode into the drop down element. |
| countryChange | `<Country>` | `None` | Emits country value when the user selects a country from the dropdown. |
| maskPlaceholder | `boolean` | `false` | Masks the input as you type with the placeholder. |
| maskAsYouType | `boolean` | `false` | Masks the input as you type with using AsYouTypeFormatter. NOTE: Does not work with maskPlaceholder is enabled |
| noDigitsPlaceholder | `boolean` | `false` | Masks the placeholder with 'X' instead of an example number. |
| symbolToMaskPlaceholderWith | `string` | `X` | this symbol will be used to mask placeholder when noDigitsPlaceholder is enabled. |
| dynamicMaxLength | `boolean` | `false` | When enabled, maxLength will be calculated and used for limiting the input. maxLength is determined based on length of placeholder |

## Supported Formats

Expand Down
Loading