时间戳

首页 > 解决方案 > 当 Css 类改变时运行函数

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

问题描述

当我的输入为“脏”和“有效”时，我想更改下一个 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';
    }
  }

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

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

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

这样的事情存在吗？

标签： javascripthtmlangular

解决方案

使用Adjacent 兄弟组合器和Angular 的状态类：

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

推荐阅读