javascript - CSS类更改时运行功能

当我的输入为“脏”和“有效”时，我想更改下一个HTML元素的bordercolor。

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';
    }
  }

到目前为止，这是可行的，当您在textarea中键入内容时，(onKeyUp)会验证textarea是否为空并更改bordercolor。

我想要一个更清洁的东西，例如[ngRun]="functionToRun() | functionThatMustBeTrue".

此处：[ngRun]="changeBorderColorOnValidation('exampleId') | Form.get('exampleId')?.valid && vvtForm.get('exampleId')?.dirty)

是否存在这样的东西？

最佳答案

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

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