在 ngx-intl-tel-input 中如何在选择国家之前放置自定义占位符

huangapple
go评论69阅读模式
英文:

How to place a custom placeholder in ngx-intl-tel-input before country selection

问题

需要在“ngx-intl-tel-input”中在选择国家代码和输入号码之前有一个占位符，类似于'Office Phone'。

尝试使用以下两个字段进行设置，但输入框仍然为空：

[enablePlaceholder]="true"
[customPlaceholder]="Office Phone"

结果

期望结果

目前正在使用Angular 12。如果有其他库可以实现所期望的结果，请提供建议。

英文:

Need to have a placeholder like 'Office Phone' in 'ngx-intl-tel-input' before the country code selection and number input happens

  1. <form #f="ngForm" [formGroup]="phoneForm">
  2.     <div class="wrapper">
  3.       <ngx-intl-tel-input
  4.         [cssClass]="'custom'"
  5.         [enableAutoCountrySelect]="true"
  6.         [enablePlaceholder]="true"
  7.         [customPlaceholder]="Office Phone"
  8.         [searchCountryFlag]="true"
  9.         [searchCountryField]="[
  10.           SearchCountryField.Iso2,
  11.           SearchCountryField.Name
  12.         ]"
  13.         [selectFirstCountry]="false"
  14.         [maxLength]="15"
  15.         [phoneValidation]="true"
  16.         [separateDialCode]="separateDialCode"
  17.         [numberFormat]="PhoneNumberFormat.National"
  18.         name="phone"
  19.         formControlName="phone"
  20.       >
  21.       </ngx-intl-tel-input>
  22.     </div>
  23.   </form>

Trying to set it using below two fields but the still the input box looks empty

  1.  [enablePlaceholder]="true"
  2.  [customPlaceholder]="Office Phone"

Result

Expected result

Currently using Angular 12.Kindly suggest if any other library could give the desired result.

答案1

得分: 0

[enablePlaceholder]="true"
customPlaceholder="手机号码"

无属性绑定的占位符有效。

感谢
@Fazeel Ashraf

英文: 
  1. [enablePlaceholder]="true" 
  2. customPlaceholder="Mobile Number"

Placeholder without the property binding works.

-
Credits to
@Fazeel Ashraf

huangapple
  • 本文由 发表于 2023年2月10日 13:41:41
  • 转载请务必保留本文链接：https://go.coder-hub.com/75407361.html
  • angular
  • intl-tel-input
  • ngx-international-phone-number
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定