Angular中通过指令移除自定义表单控件的宿主验证样式

方法一：直接注入父组件实例，实时清理验证样式 #

利用Angular的注入器，在myDir指令中获取外层CustomFormControlComponent的实例，监听表单控件状态变化，实时移除父组件宿主上的Angular验证类。

指令代码

import { Directive, Input, OnInit, OnDestroy, Injector } from '@angular/core';
import { CustomFormControlComponent } from './custom-form-control.component';
import { Subscription } from 'rxjs';
import { NgControl } from '@angular/forms';

@Directive({
  selector: '[myDir]'
})
export class MyDirective implements OnInit, OnDestroy {
  @Input('myDir') disableValidationStyles: boolean;
  private controlSub: Subscription;
  private parentComponent: CustomFormControlComponent;
  private ngControl: NgControl;

  constructor(private injector: Injector) {}

  ngOnInit(): void {
    // 获取父组件实例
    this.parentComponent = this.injector.get(CustomFormControlComponent);
    // 获取当前input关联的表单控件实例
    this.ngControl = this.injector.get(NgControl);

    if (this.disableValidationStyles && this.ngControl) {
      // 监听控件状态变化，实时清理验证类
      this.controlSub = this.ngControl.statusChanges.subscribe(() => {
        this.removeValidationClasses();
      });
      // 初始化时先执行一次清理
      this.removeValidationClasses();
    }
  }

  private removeValidationClasses(): void {
    const hostElement = this.parentComponent.hostRef.nativeElement;
    // 定义所有需要移除的验证相关类
    const validationClasses = ['ng-valid', 'ng-invalid', 'ng-touched', 'ng-untouched', 'ng-dirty', 'ng-pristine'];
    validationClasses.forEach(cls => hostElement.classList.remove(cls));
  }

  ngOnDestroy(): void {
    this.controlSub?.unsubscribe();
  }
}

方法二：通过组件状态+CSS覆盖实现（更符合Angular最佳实践） #

不在指令中直接操作DOM，而是给父组件添加一个控制开关，通过CSS覆盖验证样式的影响，指令只负责切换这个开关。

修改父组件代码

import { Component, HostBinding, Input } from '@angular/core';
import { ControlValueAccessor } from '@angular/forms';

@Component({
  selector: 'custom-form-control',
  ...
})
export class CustomFormControlComponent implements ControlValueAccessor {
  constructor(public hostRef: ElementRef) {}

  @HostBinding('class.custom-form-control') defaultClass = true;
  // 添加禁用验证的状态开关
  @HostBinding('class.disable-validation') disableValidationStyles = false;

  // 实现ControlValueAccessor的其他代码...
}

组件样式（或全局样式）

/* 当启用禁用验证开关时，覆盖所有验证类的样式 */
.custom-form-control.disable-validation {
  &.ng-valid, &.ng-invalid, &.ng-touched, &.ng-dirty {
    border-color: inherit;
    box-shadow: none;
    /* 根据需求添加其他需要重置的样式 */
  }
}

简化后的指令代码

import { Directive, Input, OnInit, Injector } from '@angular/core';
import { CustomFormControlComponent } from './custom-form-control.component';

@Directive({
  selector: '[myDir]'
})
export class MyDirective implements OnInit {
  @Input('myDir') set disableValidationStyles(value: boolean) {
    if (this.parentComponent) {
      this.parentComponent.disableValidationStyles = value;
    }
  }

  private parentComponent: CustomFormControlComponent;

  constructor(private injector: Injector) {}

  ngOnInit(): void {
    this.parentComponent = this.injector.get(CustomFormControlComponent);
  }
}

方法三：拦截DOM类属性变化 #

通过Renderer2监听父组件宿主元素的类属性变化，一旦检测到验证类被添加，立即移除。

指令代码

import { Directive, Input, OnInit, Renderer2, Injector } from '@angular/core';
import { CustomFormControlComponent } from './custom-form-control.component';

@Directive({
  selector: '[myDir]'
})
export class MyDirective implements OnInit {
  @Input('myDir') disableValidationStyles: boolean;
  private parentElement: HTMLElement;

  constructor(
    private renderer: Renderer2,
    private injector: Injector
  ) {}

  ngOnInit(): void {
    if (this.disableValidationStyles) {
      const parentComponent = this.injector.get(CustomFormControlComponent);
      this.parentElement = parentComponent.hostRef.nativeElement;
      
      // 监听类属性变化
      this.renderer.listen(this.parentElement, 'DOMAttrModified', (e) => {
        if (e.attrName === 'class') {
          this.removeValidationClasses();
        }
      });
      // 初始化清理
      this.removeValidationClasses();
    }
  }

  private removeValidationClasses(): void {
    const validationClasses = ['ng-valid', 'ng-invalid', 'ng-touched', 'ng-untouched', 'ng-dirty', 'ng-pristine'];
    validationClasses.forEach(cls => {
      if (this.parentElement.classList.contains(cls)) {
        this.renderer.removeClass(this.parentElement, cls);
      }
    });
  }
}

方案选型建议 #

• 若需要完全移除验证类，选方法一；
• 若希望通过样式覆盖实现，避免直接操作DOM，选方法二（代码最简洁，维护成本最低）；
• 若需要拦截所有类添加行为，选方法三（注意DOMAttrModified在现代浏览器中均支持）。

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