Angular Material中intlTelInput搜索栏隐藏及样式冲突问题求助

1. 隐藏组件搜索栏 #

intlTelInput自带搜索栏开关配置，直接在初始化参数里添加showSearch: false即可关闭：

const iti = intlTelInput(inputEle, {
  initialCountry: 'in',
  separateDialCode: false,
  utilsScript: "https://cdn.jsdelivr.net/npm/intl-tel-input@19.2.19/build/js/utils.js",
  showSearch: false // 新增该配置隐藏搜索栏
});

2. 选择国家后区号不显示 #

当前配置separateDialCode: false会将区号合并到输入框内容中，若要让区号和国旗一起显示在输入框左侧，需将该参数改为true，同时调整样式避免被Angular Material组件遮挡：

修改初始化配置 #

const iti = intlTelInput(inputEle, {
  initialCountry: 'in',
  separateDialCode: true, // 改为true显示独立区号
  utilsScript: "https://cdn.jsdelivr.net/npm/intl-tel-input@19.2.19/build/js/utils.js",
  showSearch: false
});

添加配套样式 #

::ng-deep .iti {
  width: 100%;
}
::ng-deep .iti__selected-dial-code {
  margin-left: 8px;
}
::ng-deep .iti__input {
  padding-left: 60px !important; /* 给区号预留显示空间 */
}

3. 解决Angular Material与intlTelInput的CSS冲突 #

利用Angular的::ng-deep穿透样式隔离，重置冲突样式：

/* 确保下拉框在Material组件上层显示 */
::ng-deep .iti__dropdown {
  z-index: 10000 !important;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 4px;
}

/* 统一输入盒模型，避免内边距冲突 */
::ng-deep .iti__input {
  box-sizing: border-box;
  width: 100%;
}

/* 调整国旗图标位置，避免和Material标签重叠 */
::ng-deep .iti__flag-container {
  left: 10px;
}

优化组件初始化时机（替代setTimeout） #

不用setTimeout依赖延迟，改用Angular的AfterViewInit生命周期钩子更可靠：

import { AfterViewInit, Component } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';
declare var intlTelInput: any;

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements AfterViewInit {
  addCustForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.addCustForm = this.fb.group({
      phone: [''],
      countryselectedtype: ['']
    });
  }

  ngAfterViewInit(): void {
    const inputEle = document.querySelector("#phone");
    if (inputEle) {
      const iti = intlTelInput(inputEle, {
        initialCountry: 'in',
        separateDialCode: true,
        showSearch: false,
        utilsScript: "https://cdn.jsdelivr.net/npm/intl-tel-input@19.2.19/build/js/utils.js",
      });
      
      this.addCustForm.patchValue({countryselectedtype: iti.getSelectedCountryData().iso2});

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

内容的提问来源于stack exchange，提问作者sarabjeet singh