Search code examples
angularangular7onblur

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


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>

Solution

  • 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