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

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

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

<form #f="ngForm" [formGroup]="phoneForm">
    <div class="wrapper">
      <ngx-intl-tel-input
        [cssClass]="'custom'"
        [enableAutoCountrySelect]="true"
        [enablePlaceholder]="true"
        [customPlaceholder]="Office Phone"
        [searchCountryFlag]="true"
        [searchCountryField]="[
          SearchCountryField.Iso2,
          SearchCountryField.Name
        ]"
        [selectFirstCountry]="false"
        [maxLength]="15"
        [phoneValidation]="true"
        [separateDialCode]="separateDialCode"
        [numberFormat]="PhoneNumberFormat.National"
        name="phone"
        formControlName="phone"
      >
      </ngx-intl-tel-input>
    </div>
  </form>

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

 [enablePlaceholder]="true"
 [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

英文:
[enablePlaceholder]="true" 
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:

确定