Ionic 6.20.1的ion-intl-tel-input默认国家/地区占位符问题

1tu0hz3e  于 2022-12-08  发布在  Ionic
关注(0)|答案(1)|浏览(177)

我已经成功地安装和配置了插件-“ion-intl-tel-input”从< https://github.com/azzamasghar1/ion-intl-tel-input >这是工作正常。但我需要重置默认的国家的选择框占位符从“国家”到空白标志作为占位符在那。我已经花了大约1周的时间,但没有什么成果。

(注):我不想在第一次实现默认“[defaultCountryiso]”或第一个“[selectFirstCountry]”国家选择。它应该是为用户打开的手动选择选项。

下面是我的参考代码:
mobile.page.html

<ion-intl-tel-input class="lastnamefilter-new color"                
        required
        id="countrycode" 
        name="countrycode" 
        [(ngModel)]="countrycode"
        #phoneControl="ngModel"
        (ionChange)="showCountryName($event)" 
        [defaultCountryiso]="defaultCountryIsoTest"
        [dialCodePrefix]= "dialCodePrefix"
        [enableAutoCountrySelect]="enableAutoCountrySelect"
        [enablePlaceholder]="enablePlaceholder"
        [fallbackPlaceholder]="fallbackPlaceholder"
        [inputPlaceholder]="inputPlaceholder"
        [minLength]= "minLength"
        [modalTitle]="modalTitle"
        [modalCssClass]="modalCssClass"
        [modalSearchPlaceholder]="modalSearchPlaceholder"
        [modalCloseText]="modalCloseText"
        [modalCloseButtonSlot]= "modalCloseButtonSlot"
        [modalCanSearch]="modalCanSearch"
        [modalShouldBackdropClose]="modalShouldBackdropClose"
        [modalShouldFocusSearchbar]="modalShouldFocusSearchbar"
        [modalSearchFailText]="modalSearchFailText"
        [onlyCountries]= "onlyCountries"
        [preferredCountries]="preferredCountries"
        [selectFirstCountry]="selectFirstCountry"
        [separateDialCode]="separateDialCode"
      >
      </ion-intl-tel-input>

mobile.page.ts

import { IonIntlTelInputModule } from 'ion-intl-tel-input';

  @Component({
    selector: 'app-mobile',
    templateUrl: './mobile.page.html',
    styleUrls: ['./mobile.page.scss'],
  })
  export class MobilePage implements OnInit {

    countrycode = {
      isoCode: '',
      dialCode: '',
      internationalNumber: '',
      nationalNumber: ''
    };
    
    country_code: any;
    defaultCountryIsoTest = '';
    dialCodePrefix = '+';
    enableAutoCountrySelect = true;
    enablePlaceholder = true;
    fallbackPlaceholder = '';
    inputPlaceholder = 'Enter Mobile Number';
    minLength = '8';
    modalTitle = 'Select Country';
    modalCssClass = '';
    modalSearchPlaceholder = 'Enter country name';
    modalCloseText = 'Close';
    modalCloseButtonSlot = 'end';
    modalCanSearch = true;
    modalShouldBackdropClose = true;
    modalShouldFocusSearchbar = true;
    modalSearchFailText = 'No countries found.';
    onlyCountries = [];
    preferredCountries = ['in', 'sg'];
    selectFirstCountry = false;
    separateDialCode = false;
    disableTest = false;

   constructor(private ionIntlTelInputModule:IonIntlTelInputModule ) {}

   showCountryName(obj) {
     console.log(this.countrycode, obj);
   }
 }

我得到的截图:

我期望实现的目标:

提前感谢!

laximzn5

laximzn51#

在我的高级开发指导下,简单地用CSS得到了解决方案。
这就是:

ion-intl-tel-input {
    ::ng-deep .ionic-selectable-has-placeholder div.ionic-selectable-value-item 
    {
      content: "";
      display: inline-block;
      width: 23px;
      background-color: var(--placeholder-color, #999);
      height: 18px;
      font-size: 0px;
    }
  }

相关问题