如何将有效/无效的伪类与Angular表单控件验证器混合？

Question

我正在使用Agular表单控件来控制“选择”有效性。当所述“选择”无效时，可以在“选择”上找到类“ ng-invalid”。当“选择”有效时，类为“ ng-valid”。

但是，伪类仍然以“：valid”的方式保留。问题是我正在使用第三方库来存储样式，该库基于伪类来处理样式。

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

我希望伪类：invalid适用（这是css样式），当类为“ ng-invalid”时，当select为空时。（我知道我可以将require添加到select元素中，但实际上我的实际用例中还有其他验证器）

谢谢

Answer 1

简单的方法是将非活动状态的.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中查看示例