如何将伪 class valid/invalid 与 Angular 表单控件验证器混合使用？

Question

我正在使用 Agular 表单控件来控制 "select" 有效性。当表示"select"无效时，class可以在"select"上找到"ng-invalid"。 Class "ng-valid" 是，当 "select" 有效时。

然而，伪 class 仍然是“:valid”。问题是我正在使用基于伪 classes 的第三方样式库来处理样式。

看看这个例子， https://stackblitz.com/edit/angular-xypbcc

我希望伪 class :invalid 应用（并且它是 css 样式），当 class 是 "ng-invalid" 时，当 select是空的。（我知道我可以将 required 添加到 select 元素，但实际上在我的实际用例中还有其他验证器）

谢谢

Answer 1

最简单的方法是将 inactive 的 .css 复制到 .ng-invalid

解决方法是使用setCustomValidity您可以使用指令

@Directive({
  selector: "[invalid]"
})
export class InvalidDirective implements OnInit, OnDestroy {
  subscription$: any;
  @Input("invalid") checkAtFirst: boolean = false;
  constructor(private control: NgControl, private el: ElementRef) {}
  ngOnInit() {
    this.subscription$ = this.control.statusChanges.subscribe(res => {
      this.el.nativeElement.setCustomValidity(res == "INVALID" ? "error" : "");
    });
    if (this.checkAtFirst && this.control.invalid)
      this.el.nativeElement.setCustomValidity("error");
  }
  ngOnDestroy() {
    this.subscription$.unsubscribe();
  }
}

该指令在构造函数中注入 ngControl（输入）和 elementRef（HTMLElement）并订阅 statusChange。如果你想先检查，我使用输入

所以你像这样使用

 <select invalid=true formControlName="fcselect">
//or
 <select invalid formControlName="fcselect">

您可以在 stackblitz

中查看示例

如何将伪 class valid/invalid 与 Angular 表单控件验证器混合使用？

How to mix pseudo class valid/invalid with Angular form control validator?

css

forms

pseudo-class

angular