Css 为什么带有自定义验证错误的表单控件不'；无法触发`:invalid`伪选择器？

我有一个表单，其中有一个自定义组件

<form id="fg" [formGroup]="fg">
  <div class="col-lg">
    <custom-input-text
          name="email"
          type="email"
          required
          formControlName="email"
          autocomplete="on">Email Address
    </custom-input-text>
  </div>
</form>

此外，自定义组件：

export declare class CustomInputText implements OnInit, ControlValueAccessor {
  private renderer;
  type: string;
  protected _type: string;
  directive: string;
  protected _directive: string;
  disabled: boolean;
  placeholder: string;
  errorMessage: string;
  required: boolean;
  readOnly: boolean;
  name: string;
  val: string;
  el: ElementRef;
  value: string;
  onChange: any;
  onTouched: any;
  setDisabled: any;
  protected _validateType(): void;
  protected _validateDirective(): void;
  ngOnInit(): void;
  registerOnChange(fn: any): void;
  registerOnTouched(fn: any): void;
  writeValue(value: any): void;
  setDisabledState(isDisabled: boolean): void;
  constructor(renderer: Renderer2);
}

例如：

---

您可以发布自定义输入文本组件代码吗？请注意，formControlName不适用于自定义输入，因为您需要使用value accesor/I可以理解为什么您需要自定义验证程序，而不是自定义输入表单。您可能应该在这里发布其代码

.formField input:invalid {
    border: 1px solid red !important;
} 

export declare class CustomInputText implements OnInit, ControlValueAccessor {
  private renderer;
  type: string;
  protected _type: string;
  directive: string;
  protected _directive: string;
  disabled: boolean;
  placeholder: string;
  errorMessage: string;
  required: boolean;
  readOnly: boolean;
  name: string;
  val: string;
  el: ElementRef;
  value: string;
  onChange: any;
  onTouched: any;
  setDisabled: any;
  protected _validateType(): void;
  protected _validateDirective(): void;
  ngOnInit(): void;
  registerOnChange(fn: any): void;
  registerOnTouched(fn: any): void;
  writeValue(value: any): void;
  setDisabledState(isDisabled: boolean): void;
  constructor(renderer: Renderer2);
}