Model two way data binding / parse existing number doesn't work

[martinkrulltott]

When setting the value of the model in advance, the value isn't parsed in to the tel-input element automatically (as it usually is with 2-way data binding). HTML <input type="text" class="form-control" id="twoway" name="twoway" ng-model="twoway" ng-intl-tel-input> JS $scope.twoway = "+61430112233";

In this example I'd expect the directive to pick up the existing model and parse it (detect the +61 = Australia country code) to display the flag and number, but instead it's only displaying an empty input field with the default country code selected.

[santhosh-ps]

Any update on this? @martinkrulltott did you solve or find any workaround for this issue? Please help me if you did, am stuck on this.

[dhanushrajendra]

@martinkrulltott , Even im not able to perform two way data binding. Not able to update the edited phone number. Please provide me a solution to it .

[martinkrulltott]

Sorry guys, no updates from me, still stuck on this as well. For me this is quite a deal breaker since I need to be able to display existing data in the input field. I've been looking around for other ng libraries but haven't found anything yet.

[dhanushrajendra]

But @martinkrulltott , the website angel.co uses your plugin and are able to perform two way data binding. Any idea , how?

[martinkrulltott]

@dhanushrajendra it's not my plugin, I'm only a user just like you. Sorry, I have no idea.

[dhanushrajendra]

Okay @martinkrulltott .Sorry , keep us updated on the same. Thank you

[bighappyface]

Thanks for the report and patience on this, folks.

I performed the following tasks to troubleshoot:

1. Clone this repository
2. npm install
3. bower install
4. ./node_modules/.bin/http-server
5. Open http://localhost:8080 in my browser to see index.html demonstration page
6. Verify model value is empty and top field has US flag default
7. Pre-populate model value in the scope by adding $scope.tel = '+4407400123456'; below line 106 of index.html - https://github.com/hodgepodgers/ng-intl-tel-input/blob/5f0ca7dbb2b954249b176945fd61bc252d8a5ec6/index.html#L106
8. Refresh browser and verify model value is shown in the top field and UK flag is pre-selected

Based on those troubleshooting tasks I am not experiencing any issues with two-way data binding. The demonstration file index.html provides a sandbox to tinker with things and I am open to review code examples of the issue.

[alexey-sh]

+1 the directive doesn't work.

[alexey-sh]

ctrl.$validators.ngIntlTelInput = function (value) {
            // if phone number is deleted / empty do not run phone number validation
            if (value || elm[0].value.length > 0) {
                return elm.intlTelInput('isValidNumber');  // --->>> always returns false because the value contain two plus signs.
            } else {
                return true;
            }
          };

[Davidgl1987]

Have you tried adding the script utils.js from the intl-tel-input library?