mat-tel-input — international phone fields for Material
A standalone Angular component that drops into mat-form-field with country search, E.164 hydration, validation, and CSS variables for theming. Published on npm with live documentation and a playground.
Screenshot of the hosted demo at mattelinput.muneersahel.com
Highlights
Form control friendly
Implements ControlValueAccessor so it behaves like any other Material control inside reactive or template-driven forms.
Validation built in
Registers sensible validators and exposes matTelInputValidator when you need explicit control over error messages.
Configurable UX
Preferred and allowed country lists, search in the dropdown, display formats (national / international), and CSS custom properties for flags and dial codes.
Stack
Angular Angular Material TypeScript libphonenumber-js npm
