From d512af2173b5a14c66f51c6bfcf0a49cf90542aa Mon Sep 17 00:00:00 2001 From: mohamedmagdy715 Date: Wed, 15 Dec 2021 13:55:29 +0200 Subject: [PATCH 1/3] Added (no countries found) option on searching countries --- README.md | 1 + .../src/lib/ngx-intl-tel-input.component.html | 9 ++++++-- .../src/lib/ngx-intl-tel-input.component.ts | 22 ++++++++++++++----- src/app/app.component.html | 3 ++- src/app/app.component.ts | 1 + 5 files changed, 28 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index 663cb403..177c6dfc 100644 --- a/README.md +++ b/README.md @@ -121,6 +121,7 @@ Or this: | selectedCountryISO | `` | `None` | Set specific country on load. | | separateDialCode | `boolean` | `false` | Visually separate dialcode into the drop down element. | | countryChange | `` | `None` | Emits country value when the user selects a country from the dropdown. | +| noCountriesText | `string` | `'No Countries Found'` | Custom string to be displayed when searching for not found country | ## Supported Formats diff --git a/projects/ngx-intl-tel-input/src/lib/ngx-intl-tel-input.component.html b/projects/ngx-intl-tel-input/src/lib/ngx-intl-tel-input.component.html index 4d0883f0..fbfce6ee 100644 --- a/projects/ngx-intl-tel-input/src/lib/ngx-intl-tel-input.component.html +++ b/projects/ngx-intl-tel-input/src/lib/ngx-intl-tel-input.component.html @@ -21,7 +21,8 @@ (keyup)="searchCountry()" (click)="$event.stopPropagation()" [placeholder]="searchCountryPlaceholder" - autofocus> + autofocus + autocomplete="off">
    @@ -41,7 +42,8 @@
  • + [id]="country.htmlId" + [hidden]="noCountriesFound">
    @@ -49,6 +51,9 @@ {{country.name}} +{{country.dialCode}}
    • +
  • + {{noCountriesText}} +
diff --git a/projects/ngx-intl-tel-input/src/lib/ngx-intl-tel-input.component.ts b/projects/ngx-intl-tel-input/src/lib/ngx-intl-tel-input.component.ts index 069fa536..b826c306 100644 --- a/projects/ngx-intl-tel-input/src/lib/ngx-intl-tel-input.component.ts +++ b/projects/ngx-intl-tel-input/src/lib/ngx-intl-tel-input.component.ts @@ -62,6 +62,8 @@ export class NgxIntlTelInputComponent implements OnInit, OnChanges { @Input() phoneValidation = true; @Input() inputId = 'phone'; @Input() separateDialCode = false; + // take string input to be customized with project language + @Input() noCountriesText = "No Countries Found"; separateDialCodeClass: string; @Output() readonly countryChange = new EventEmitter(); @@ -85,6 +87,8 @@ export class NgxIntlTelInputComponent implements OnInit, OnChanges { disabled = false; errors: Array = ['Phone number is required.']; countrySearchText = ''; + // flag if no countries found + noCountriesFound : boolean = false; @ViewChild('countryList') countryList: ElementRef; @@ -194,17 +198,25 @@ export class NgxIntlTelInputComponent implements OnInit, OnChanges { }); if (country.length > 0) { + this.noCountriesFound = false; const el = this.countryList.nativeElement.querySelector( '#' + country[0].htmlId ); if (el) { - el.scrollIntoView({ - behavior: 'smooth', - block: 'nearest', - inline: 'nearest', - }); + // added setTimeout to make scroll happen because the view is + // not done yet before setTimeout if this.noCountriesFound changed state from true to false + setTimeout(()=>{ + el.scrollIntoView({ + behavior: 'smooth', + block: 'nearest', + inline: 'nearest', + }); + },0) } } + else{ + this.noCountriesFound = true; + } this.checkSeparateDialCodeStyle(); } diff --git a/src/app/app.component.html b/src/app/app.component.html index 1db2a2a2..a2ae82d0 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -26,7 +26,8 @@

Test International Telephone Input Form

[separateDialCode]="separateDialCode" [numberFormat]="PhoneNumberFormat.National" name="phone" - formControlName="phone"> + formControlName="phone" + [noCountriesText]="noFoundCountries">
diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 2a865718..4e4eebb8 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -22,6 +22,7 @@ export class AppComponent { phoneForm = new FormGroup({ phone: new FormControl(undefined, [Validators.required]), }); + noFoundCountries : string = "No Countries Found" changePreferredCountries() { this.preferredCountries = [CountryISO.India, CountryISO.Canada]; From 92f0e486736b88dcd36c16fc72bad573e86782c9 Mon Sep 17 00:00:00 2001 From: mohamedmagdy715 Date: Wed, 15 Dec 2021 14:06:31 +0200 Subject: [PATCH 2/3] Added (no countries found) option on searching countries 2 --- .../src/lib/ngx-intl-tel-input.component.html | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/projects/ngx-intl-tel-input/src/lib/ngx-intl-tel-input.component.html b/projects/ngx-intl-tel-input/src/lib/ngx-intl-tel-input.component.html index fbfce6ee..74c763be 100644 --- a/projects/ngx-intl-tel-input/src/lib/ngx-intl-tel-input.component.html +++ b/projects/ngx-intl-tel-input/src/lib/ngx-intl-tel-input.component.html @@ -21,8 +21,7 @@ (keyup)="searchCountry()" (click)="$event.stopPropagation()" [placeholder]="searchCountryPlaceholder" - autofocus - autocomplete="off"> + autofocus>
    From 7b777b1e1db2930fe06a9425a168076410b59b18 Mon Sep 17 00:00:00 2001 From: mohamedmagdy715 Date: Sat, 18 Dec 2021 15:50:15 +0200 Subject: [PATCH 3/3] enhanced scrollintoview for not found --- .../src/lib/ngx-intl-tel-input.component.ts | 25 ++++++++++++++----- 1 file changed, 19 insertions(+), 6 deletions(-) diff --git a/projects/ngx-intl-tel-input/src/lib/ngx-intl-tel-input.component.ts b/projects/ngx-intl-tel-input/src/lib/ngx-intl-tel-input.component.ts index b826c306..3256574d 100644 --- a/projects/ngx-intl-tel-input/src/lib/ngx-intl-tel-input.component.ts +++ b/projects/ngx-intl-tel-input/src/lib/ngx-intl-tel-input.component.ts @@ -19,8 +19,8 @@ import { setTheme } from 'ngx-bootstrap/utils'; import { CountryCode } from './data/country-code'; import { CountryISO } from './enums/country-iso.enum'; import { SearchCountryField } from './enums/search-country-field.enum'; -import type { ChangeData } from './interfaces/change-data'; -import type { Country } from './model/country.model'; +import { ChangeData } from './interfaces/change-data'; +import { Country } from './model/country.model'; import { phoneNumberValidator } from './ngx-intl-tel-input.validator'; import { PhoneNumberFormat } from './enums/phone-number-format.enum'; @@ -89,6 +89,8 @@ export class NgxIntlTelInputComponent implements OnInit, OnChanges { countrySearchText = ''; // flag if no countries found noCountriesFound : boolean = false; + // flag to do the settimeout if the view not ended yet + comingFromFalseFlag : boolean = false; @ViewChild('countryList') countryList: ElementRef; @@ -203,19 +205,30 @@ export class NgxIntlTelInputComponent implements OnInit, OnChanges { '#' + country[0].htmlId ); if (el) { - // added setTimeout to make scroll happen because the view is - // not done yet before setTimeout if this.noCountriesFound changed state from true to false - setTimeout(()=>{ + if(!this.comingFromFalseFlag){ el.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest', }); - },0) + } + else{ + // added setTimeout to make scroll happen because the view is + // not done yet before setTimeout if this.noCountriesFound changed state from true to false + setTimeout(()=>{ + el.scrollIntoView({ + behavior: 'smooth', + block: 'nearest', + inline: 'nearest', + }); + },0) + this.comingFromFalseFlag = false; + } } } else{ this.noCountriesFound = true; + this.comingFromFalseFlag = true; } this.checkSeparateDialCodeStyle();