求助：如何隐藏mat-form-field边框？下拉框启用时不显示验证边框

核心思路 #

Angular Material的mat-form-field验证边框会在表单控件交互时显示，而ng-tel-input-gg下拉框展开时，边框会覆盖下拉选项。直接调整z-index无效是因为Material的边框由伪元素或内部元素生成，需要针对性覆盖样式。

具体解决方案 #

1. 全局样式覆盖（推荐） #

在全局样式文件（如styles.scss）中添加以下CSS，精准定位下拉框展开状态下的mat-form-field边框：

/* 下拉框展开时隐藏完整验证边框 */
.iti--show-dropdown ~ .mat-form-field-appearance-outline .mat-form-field-outline {
  display: none !important;
}

/* 可选：仅隐藏侧边和顶部边框，保留底部基线 */
.iti--show-dropdown ~ .mat-form-field-appearance-outline .mat-form-field-outline-start,
.iti--show-dropdown ~ .mat-form-field-appearance-outline .mat-form-field-outline-end {
  display: none !important;
}

说明：iti--show-dropdown是ng-tel-input-gg下拉框展开时自动添加到容器的类，通过兄弟选择器定位对应mat-form-field的边框元素。

2. 组件内样式穿透 #

若不想修改全局样式，可在组件SCSS中使用::ng-deep（注意Angular版本兼容性）：

::ng-deep .iti--show-dropdown ~ .mat-form-field-appearance-outline .mat-form-field-outline {
  display: none !important;
}

3. 动态控制类名 #

通过监听下拉框状态，给mat-form-field添加自定义类来隐藏边框：

• 组件TS代码：

import { Component, ViewChild } from '@angular/core';
import { NgTelInputGGAComponent } from 'ng-tel-input-gg';

@Component({
  selector: 'app-phone-input',
  templateUrl: './phone-input.component.html',
  styleUrls: ['./phone-input.component.scss']
})
export class PhoneInputComponent {
  @ViewChild(NgTelInputGGAComponent) telInput!: NgTelInputGGAComponent;
  isDropdownOpen = false;

  ngAfterViewInit() {
    this.telInput.dropdownStateChange.subscribe((isOpen: boolean) => {
      this.isDropdownOpen = isOpen;
    });
  }
}

• 组件HTML代码：

<mat-form-field [class.hide-validation-border]="isDropdownOpen">
  <ng-tel-input-gg></ng-tel-input-gg>
</mat-form-field>

• 组件SCSS代码：

.hide-validation-border .mat-form-field-appearance-outline .mat-form-field-outline {
  display: none !important;
}

注意事项 #

• 确保CSS选择器优先级足够，必要时合理使用!important。
• 若使用Angular Material其他外观（如legacy），需将选择器中的mat-form-field-appearance-outline替换为对应类名（如mat-form-field-appearance-legacy）。

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