CODEWITHSUNDEEP
angularintl-tel-inputngx-international-phone-number
mediocreCoder
mediocreCoder

Reputation: 67

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

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.

Upvotes: 0

Views: 3349

Answers (1)

mediocreCoder
mediocreCoder

Reputation: 67

[enablePlaceholder]="true" 
customPlaceholder="Mobile Number"

Placeholder without the property binding works.

- Credits to @Fazeel Ashraf

Upvotes: 0

Related Questions