Angular 7 ngx-intl-tel-input onBlur() event any solution?

Question

I stucked with a issue in Angular 7 with ngx-intl-tel-input package. i just want to check phonenumber on blur.

   <ngx-intl-tel-input [cssClass]="'form-control'" [preferredCountries]="preferredCountries"
        [enableAutoCountrySelect]="false" [enablePlaceholder]="true" [searchCountryFlag]="true"
        [searchCountryField]="[SearchCountryField.Iso2, SearchCountryField.Name]" [selectFirstCountry]="false"
        [selectedCountryISO]="CountryISO.Canada" [maxLength]="15" [tooltipField]="TooltipLabel.Name"
        [phoneValidation]="true" name="PhoneNumber" [(ngModel)]="formModel.PhoneNumber" #PhoneNumber="ngModel">
      </ngx-intl-tel-input>

score 0 · Accepted Answer · answered Jan 01 '20 at 11:29

Angular Forms API has updateOn option you can use that to trigger ngModelChange on blur

component.html

    <ngx-intl-tel-input [cssClass]="'form-control'" [preferredCountries]="preferredCountries"
            [enableAutoCountrySelect]="false" [enablePlaceholder]="true" [searchCountryFlag]="true"
            (ngModelChange)="ngModelChange($event)"
            [searchCountryField]="[SearchCountryField.Iso2, SearchCountryField.Name]" [selectFirstCountry]="false"
            [selectedCountryISO]="CountryISO.Canada" [maxLength]="15" [tooltipField]="TooltipLabel.Name"
            [ngModelOptions]="{updateOn: 'blur'}"
            [phoneValidation]="true" name="PhoneNumber" [(ngModel)]="formModel.PhoneNumber" #PhoneNumber="ngModel">
     </ngx-intl-tel-input>

component.ts

 onChange(event){
    console.log(event);
  }

Example

Angular 7 ngx-intl-tel-input onBlur() event any solution?

1 Answers1