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

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

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
匿名

发表评论

匿名网友

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

确定