Two way binding of phone number is one way only

[DavidTalamona]

Expected behavior

The end user should be able to change an existing phone number.
Two way binding of the intl-tel-input should accept input.

Actual behavior

When I pass an existing value into the component like this: [(E164PhoneNumber)]="data.mobile", the value is never set in the field.

Steps to reproduce

TS:
data = {mobile: '+41791234567'};
HTML:
<intl-tel-input name="mobile" [(E164PhoneNumber)]="data.mobile" required></intl-tel-input>

intl-tel-input-ng version

0.0.7 & 0.1.0

[mpalourdio]

Thanks for feedback, but actually this is 'by design', but I have to admit this is a bit weird. I had made this little lib in a quick way to integrate it in a project.

Givin the ability to set the value in the field is a bit tedious, because we need to target the intl-tel-input main API after the component initialization, which happens once the DOM is ready, in AfterViewInit.

Marking this as feature request, will see if I have time to make this feature later.

Thanks again!

[danielehrhardt]

i mean you can do the following:

  @Input() public E164PhoneNumber: string;
  @Output() private E164PhoneNumberChange = new EventEmitter<string>();

....

  get phoneNumber(): string {
    return this.E164PhoneNumber;
  }

  set phoneNumber(value: string) {
    if (!!value) {
      this._intlTelInput.setNumber(value);
    }
    this.E164PhoneNumber = value;
    this.i18nizePhoneNumber();
  }

  public i18nizePhoneNumber(): void {
    this.E164PhoneNumber = null;
    if (this._intlTelInput.isValidNumber()) {
      this.E164PhoneNumber = this._intlTelInput.getNumber();
    }
    this.E164PhoneNumberChange.emit(this.E164PhoneNumber);
  }

with this the following should work fine
[(E164PhoneNumber)]="data.mobile"

[mpalourdio]

If you try this as is, you will see that this leads to problems. The difficulty is not to make the double binding of the phone value work, the problem is making things happen AFTER values binding in the intl-tel-input lib. (validation, country selection in the select list). We can rely on the component only in AfterViewInit, whereas in angular, @Input bindings happen on a different lifecycle hook before. So once the value is set by angular, the intl-tel-input component may not be ready yet.

The lib has a promise we can rely on but it makes things a bit tedious to implement. (but not that much I think)

But PR are of course welcome to implement this feature.

[HamzaAudeh]

Hello,

Any updates on this?