Code Monkey home page Code Monkey logo

intl-tel-input-ng's Introduction

intl-tel-input-ng

CI Coverage Status npm npm

Changelog

Please read the changelog

Contributing

Use the fork, Luke. PR without tests will likely not be merged.

What is it ?

It's an angular component to easily integrate intl-tel-input.

Installation

To install this library, run:

# install intl-tel-input
$ npm install intl-tel-input --save / yarn add intl-tel-input

# install this module
$ npm install intl-tel-input-ng --save / yarn add intl-tel-input-ng
  • Add node_modules/intl-tel-input/build/js/utils.js to the scripts section in your angular.json.
  • Add node_modules/intl-tel-input/build/css/intlTelInput.css to the styles section in your angular.json.
  • Import IntlTelInputNgModule.forRoot() in your main application module.

Options

  • options: An object wrapping the intl-tel-input options.
  • label: If specified, will generate a label for the input (if the name option is set too).
  • name: Sets name and id attributes for the input. The default value is intl-tel-input-name.
  • cssClass: The CSS class used to style the input component.
  • labelCssClass: The CSS class used to style the label associated to the input.
  • required: Sets the required && aria-required attributes for the input.
  • [(E164PhoneNumber)]: Outputs the phone number in E164 format if valid.

See the intl-tel-input repository for more documentation.

Example:

The component must be declared between <form> tags !

<form #form="ngForm">
   <intl-tel-input
       [label]="'Please enter your phone number'"
       [name]="'my-name'"
       [cssClass]="'form-control'"
       [labelCssClass]="'col-sm-2 col-form-label'"
       [required]="true"
       [options]="{
           preferredCountries: ['ch'],
           i18n: { ch: 'Suisse' },
           onlyCountries: ['fr', 'ch']
       }"
       [(E164PhoneNumber)]="E164PhoneNumber"></intl-tel-input>
</form>     

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.