Как смешать действительный / недопустимый псевдокласс с валидатором управления формой Angular? - PullRequest
Новая
       40

Как смешать действительный / недопустимый псевдокласс с валидатором управления формой Angular?

0 голосов
/ 05 мая 2020

Я использую элемент управления формы Agular для контроля допустимости «выбора». Когда сказано, что "select" недействителен, класс "ng-invalid" можно найти в "select". Класс "ng-valid" есть, когда "select" действителен.

Однако псевдокласс остается ": valid" в любом случае. Проблема в том, что я использую стороннюю библиотеку для стиля, которая основана на псевдоклассах для обработки стиля.

Взгляните на этот пример: https://stackblitz.com/edit/angular-xypbcc

Я бы хотел, чтобы псевдокласс: недопустимый применялся (и это css стиль), когда класс "ng-invalid", когда select пуст. (Я знаю, что могу добавить необходимое к элементу select, но на самом деле у меня есть другие валидаторы в моем реальном варианте использования)

Спасибо

1 Ответ

0 голосов
/ 05 мая 2020

простой способ - скопировать. css из inactive в .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

...