带有自定义验证错误的表单控件如何不触发`：invalid`伪选择器？

如何解决带有自定义验证错误的表单控件如何不触发`：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>

在定义构造函数之前，我已经在角形声明（组件内部）中对此电子邮件进行了验证。

  fg = new FormGroup({
    email: new FormControl('',[
      Validators.required,Validators.pattern(/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/)
    ]),});

我也有type="email"附带的一些默认验证。内置的验证功能使我可以在输入中使用CSS。

我知道如何更改无效的CSS。我的问题是，当模式验证无效时，它不会触发CSS伪选择器：:invalid。尽管针对angular的内置电子邮件验证确实触发了这一点。

这是我的一些CSS。 formField类被动态添加（通过打字稿转换为javascript转换）到围绕自定义元素的div中。我可以更改CSS，但本质上我只是想在条件满足的情况下“激活” CSS。

.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);
}

例如：