(hasError) Output returns Null and (ng2TelOutput) doesn't return anything

[gabrielleyva]

Hi,

For some reason, usually on first load of a page, the output (ng2TelOutput) doesn't return a parsed number and the (hasError) output returns null whenever a valid number is inputed. I'm using a mat-form-field to get the user input.

Currently, I have a workaround that displays an error and resets the input number textfield if the (hasError) returns null. The problem is that it sometimes it can take up to 4-6 input tries in order to get the parsed number and sometimes it even requires a page reload as well.

(I see this frequently whenever I create a tunnel with ngrok in case someone wants to replicate)

Is there a reason why this is happening?

Here is my number textfield code:

HTML

      <form class="form-container" [formGroup]="phoneSignInForm">
        <mat-form-field aria-label="Mobile Phone" floatLabel="always" >
          <input matInput type="text" ng2TelInput [ng2TelInputOptions]="{initialCountry: 'us'}"
          (hasError)="signInHasError($event)"
          (ng2TelOutput)="signInGetNumber($event)"
          (intlTelInputObject)="telInputObject($event)"
          (countryChange)="signInOnCountryChange($event)"
          [value]="phoneSignInForm.get('phoneSignIn').value | phoneFormat: signInSelectedCountry" 
          placeholder="MOBILE PHONE"  formControlName="phoneSignIn" required >
          <mat-error>Please enter a valid mobile phone number.</mat-error>
        </mat-form-field>
      </form>

TypeScript

  signInHasError(status: any) {
    if(status == null) {
      this.signInValidNumber = false
      this.phoneSignIn.setValue(null)
    } else {
      this.signInValidNumber = status;
    }      
  };

  telInputObject(e: any) {
  }

  signInGetNumber(n: string) {
    this.signInPhoneNumber = n;
  };

  signInOnCountryChange(c: any) {
    this.signInSelectedCountryCode = '+' + c.dialCode;
    let up: string = c.iso2;
    this.signInSelectedCountry = up.toUpperCase();
  };