如何检查Angular响应式表单中字段是否显示或隐藏？

Angular的FormControl（包括通过formGroup.get("fieldName")获取的控件）本身没有内置的显示/隐藏状态属性，因为字段的显示隐藏属于视图层逻辑，并非表单控件的核心状态（控件核心状态聚焦于值、校验状态等）。

你可以通过以下几种方式实现状态追踪：

1. 组件类中维护独立状态变量 #

在组件.ts文件里定义布尔变量控制字段显示隐藏，同时提供方法用于检查状态：

// 组件类示例
export class YourComponent {
  formGroup = new FormGroup({
    username: new FormControl(''),
    password: new FormControl('')
  });
  // 单独维护字段显示状态
  isPasswordVisible = false;

  // 通用检查方法
  isFieldVisible(fieldName: string): boolean {
    switch(fieldName) {
      case 'password':
        return this.isPasswordVisible;
      default:
        return true; // 默认字段显示
    }
  }
}

视图层通过该变量控制渲染：

<!-- 模板示例 -->
<div *ngIf="isPasswordVisible">
  <input formControlName="password" type="password">
</div>

2. 扩展FormControl添加自定义属性 #

通过继承FormControl给控件添加自定义的显示状态属性：

// 自定义带显示状态的控件类
class VisibleFormControl extends FormControl {
  isVisible = true;

  constructor(formState?: any, validatorOrOpts?: ValidatorFn | AbstractControlOptions | ValidatorFn[], asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[]) {
    super(formState, validatorOrOpts, asyncValidator);
  }
}

// 在表单组中使用自定义控件
formGroup = new FormGroup({
  email: new VisibleFormControl(''),
  phone: new VisibleFormControl('', { initialValueIsDefault: true })
});

// 检查字段显示状态
const phoneControl = this.formGroup.get('phone') as VisibleFormControl;
console.log(phoneControl.isVisible);

3. 借助disabled状态间接判断（不推荐） #

如果你的字段隐藏时会同步设置为禁用，可通过control.disabled间接判断，但这属于逻辑绑定的特殊场景，禁用和隐藏本质是两个独立概念，不建议作为通用方案：

const control = this.formGroup.get('fieldName');
const isHidden = control.disabled; // 仅当隐藏与禁用强绑定时可用

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