我已经成功地安装和配置了插件-“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);
}
}
我得到的截图:
我期望实现的目标:
提前感谢!
1条答案
按热度按时间laximzn51#
在我的高级开发指导下,简单地用CSS得到了解决方案。
这就是: