Added props format

We can format the inputted number now!

src/components/IntlTelInputApp.js

@@ -60,6 +60,8 @@ export default class IntlTelInputApp extends Component {
     autoComplete: 'off',
     // pass through arbitrary props to the tel input element
     telInputProps: {},
+    // always format the number
+    format: false,
   };
 
   static propTypes = {
@@ -94,6 +96,7 @@ export default class IntlTelInputApp extends Component {
     style: StylePropTypes,
     useMobileFullscreenDropdown: PropTypes.bool,
     telInputProps: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+    format: PropTypes.bool,
   };
 
   constructor(props) {
@@ -181,6 +184,7 @@ export default class IntlTelInputApp extends Component {
     this.handleUpDownKey = this.handleUpDownKey.bind(this);
     this.handleInputChange = this.handleInputChange.bind(this);
     this.changeHighlightCountry = this.changeHighlightCountry.bind(this);
+    this.formatNumber = this.formatNumber.bind(this);
   }
 
   componentDidMount() {
@@ -711,6 +715,20 @@ export default class IntlTelInputApp extends Component {
     }
   }
 
+  formatNumber(number) {
+    if (window.intlTelInputUtils && this.selectedCountryData) {
+      const format = !this.props.separateDialCode &&
+        (this.nationalMode || number.charAt(0) !== '+') ?
+          window.intlTelInputUtils.numberFormat.NATIONAL :
+          window.intlTelInputUtils.numberFormat.INTERNATIONAL;
+
+      number = window.intlTelInputUtils.formatNumber(number,
+        this.selectedCountryData.iso2, format);
+    }
+
+    return number;
+  }
+
   // update the input's value to the given val (format first if possible)
   // if doNotify is true, calls notifyPhoneNumberChange with the formatted value
   // NOTE: this is called from _setInitialState, handleUtils and setNumber
@@ -1175,6 +1193,8 @@ export default class IntlTelInputApp extends Component {
           autoFocus={ this.props.autoFocus }
           autoComplete={ this.props.autoComplete }
           inputProps={ this.props.telInputProps }
+          formatNumber={ this.formatNumber }
+          format={ this.props.format }
         />
       </div>
     );

src/components/TelInput.js

@@ -15,6 +15,8 @@ class TelInput extends Component {
     autoComplete: PropTypes.string,
     inputProps: PropTypes.object, // eslint-disable-line react/forbid-prop-types
     refCallback: PropTypes.func.isRequired,
+    formatNumber: PropTypes.func.isRequired,
+    format: PropTypes.bool,
   };
 
   render() {
@@ -29,7 +31,7 @@ class TelInput extends Component {
         readOnly={ this.props.readonly ? 'readonly' : false }
         name={ this.props.fieldName }
         id={ this.props.fieldId }
-        value={ this.props.value }
+        value={ this.props.format ? this.props.formatNumber(this.props.value) : this.props.value }
         placeholder={ this.props.placeholder }
         onChange={ this.props.handleInputChange }
         onBlur={ this.props.handleOnBlur }

src/index.html

@@ -238,6 +238,11 @@ <h2>Props</h2>
                 <td><code>{}</code></td>
                 <td>Pass through arbitrary props to the tel input element.</td>
               </tr>
+              <tr>
+                <th scope="row">format</th>
+                <td><code>false</code></td>
+                <td>Format the number.</td>
+              </tr>
             </tbody>
           </table>
         </div>