javascript - 当 Css 类更改时运行函数

Question

当我的输入是“脏”和“有效”时，我想更改下一个 HTML 元素的边框颜色。

HTML:

<input type="text" class="form-control" id="exampleId" formControlName="exampleId" 
[ngClass]="{  'is-valid': Form.get('exampleId')?.valid && vvtForm.get('exampleId')?.dirty) }" 
(onKeyUp)="changeBorderColorOnValidation('exampleId')">

JavaScript:

  changeBorderColorOnValidation(id) {
    if (this.Form.get(id).valid) {
      (document.querySelector('#' + id).nextSibling as HTMLElement).style.borderColor = '#28a745';
    }
  }

到目前为止，这是有效的，当您在文本区域中键入内容时，(onKeyUp) 会验证文本区域是否为空并更改边框颜色。

我想要一些更简洁的东西，比如 [ngRun]="functionToRun() | functionThatMustBeTrue".

这里:
[ngRun]="changeBorderColorOnValidation('exampleId') | Form.get('exampleId')?.valid && vvtForm.get('exampleId')?.dirty)

有这样的东西吗？

Answer 1

使用 Adjacent sibling combinator和 Angular's status classes :

.ng-invalid.ng-dirty + * {
    border-color: #28a745
}