Security News
How Threat Actors are Abusing GitHub’s File Upload Feature to Host Malware
GitHub is susceptible to a CDN flaw that allows attackers to host malware on any public repository.
ngx-11-mat-intl-tel-input
Advanced tools
Readme
An Angular Material package for entering and validating international telephone numbers. It adds a flag dropdown to any input, detects the user's country, displays a relevant placeholder and provides formatting/validation methods.
Supports:
$ npm install libphonenumber-js --save
$ npm install ngx-11-mat-intl-tel-input --save
Add NgxMatIntlTelInputModule
to your module file:
imports: [NgxMatIntlTelInputModule];
Refer to main app in this repository for working example.
<form #f="ngForm" [formGroup]="phoneForm">
<ngx-11-mat-intl-tel-input
[preferredCountries]="['us', 'gb']"
[enablePlaceholder]="true"
[enableSearch]="true"
name="phone"
formControlName="phone"
></ngx-11-mat-intl-tel-input>
</form>
<form #f="ngForm" [formGroup]="phoneForm">
<ngx-11-mat-intl-tel-input
[preferredCountries]="['us', 'gb']"
[enablePlaceholder]="true"
[enableSearch]="true"
name="phone"
(countryChanged)="yourComponentMethodToTreatyCountryChangedEvent($event)" // $event is a instance of current select Country
formControlName="phone"></ngx-11-mat-intl-tel-input>
</form>
If you want to show the sample number for the country selected or errors , use mat-hint anf mat-error as
<form #f="ngForm" [formGroup]="phoneForm">
<ngx-11-mat-intl-tel-input
[preferredCountries]="['us', 'gb']"
[onlyCountries]="['us', 'gb', 'es']"
[enablePlaceholder]="true"
name="phone"
formControlName="phone"
#phone
></ngx-11-mat-intl-tel-input>
<mat-hint>e.g. {{phone.selectedCountry.placeHolder}}</mat-hint>
<mat-error *ngIf="f.form.controls['phone']?.errors?.required"
>Required Field</mat-error
>
<mat-error *ngIf="f.form.controls['phone']?.errors?.validatePhoneNumber"
>Invalid Number</mat-error
>
</form>
| Options | Type | Default | Description |
| ------------------ | ---------- | ----------- | ----------------------------------------------------------------------------------- | --- |
| preferredCountries | string[]
| []
| List of country abbreviations, which will appear at the top. |
| onlyCountries | string[]
| []
| List of manually selected country abbreviations, which will appear in the dropdown. | |
| inputPlaceholder | string
| undefined
| Placeholder for the input component. |
| enablePlaceholder | boolean
| true
| Input placeholder text, which adapts to the country selected. |
| enableSearch | boolean
| false
| Whether to display a search bar to help filter down the list of countries |
| format | string
| default
| Format of "as you type" input. Possible values: national, international, default |
./projects/ngx-11-mat-intl-tel-input
./src/lib
with new functionality.$ npm run build_lib
$ npm run copy-files
$ npm run npm_pack
$ npm run package
After building and creating package, you can use it locally too.
In your project run:
$ npm install --save {{path to your local '*.tgz' package file}}
FAQs
An Angular Material package for entering and validating international telephone numbers. It adds a flag dropdown to any input, detects the user's country, displays a relevant placeholder and provides formatting/validation methods.
The npm package ngx-11-mat-intl-tel-input receives a total of 33 weekly downloads. As such, ngx-11-mat-intl-tel-input popularity was classified as not popular.
We found that ngx-11-mat-intl-tel-input demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
GitHub is susceptible to a CDN flaw that allows attackers to host malware on any public repository.
Security News
At Node Congress, Socket CEO Feross Aboukhadijeh uncovers the darker aspects of open source, where applications that rely heavily on third-party dependencies can be exploited in supply chain attacks.
Research
Security News
The Socket Research team found this npm package includes code for collecting sensitive developer information, including your operating system username, Git username, and Git email.