我想隐藏 intltelinput 中的搜索字段

Question

我正在使用 Angular 材料，还使用 intltelinput 来获取国家/地区移动代码，因此，材料表单字段内的 intltelinput 无法正常工作，就像我想隐藏搜索栏一样，但它不起作用，如果我选择国旗，拨号代码也不会显示。 Material CSS 也与 intltelinput CSS 发生冲突。

 <div class="col-md-4">          
              <mat-form-field class="example-full-width" appearance="fill" class="full-width-input">
                <mat-label style="margin-left: 50px;">Mobile Number</mat-label>
                <input
                  type="tel"
                  id="phone"
                  matInput  
                  class="client-tel"
                  formControlName="phone"
                  required
                />
              </mat-form-field>
            </div>

 setTimeout(() => {
    const inputEle = document.querySelector("#phone");
    if (inputEle) {
      const iti = intlTelInput(inputEle, {
        initialCountry: 'in',
        separateDialCode: false,
        utilsScript: "https://cdn.jsdelivr.net/npm/[email protected]/build/js/utils.js",
      });
       
      this.addCustForm.patchValue({countryselectedtype:iti.getSelectedCountryData().iso2});

      inputEle.addEventListener('countrychange', () => {
        const selectedCountryData = iti.getSelectedCountryData().iso2;
        this.addCustForm.patchValue({countryselectedtype:selectedCountryData});
      });
    }
  }, 100)

Answer 1

Set countrySearch:false 

var iti = window.intlTelInput(input, {
      onlyCountries: ["us", "in", "ca"],
      preferredCountries: ["us"],
      countrySearch:false,
      formatOnDisplay: true,
      utilsScript: "https://cdn.jsdelivr.net/npm/[email protected]/build/js/utils.js",
    });