Angular ng Class：动态应用类

Question

我无法动态设置类。请指导我。谢谢。

我在SCSS文件中有一个类如下：

.form-validation.invalid {
    border: 2px solid red
}

我的ts文件有一个变量名称isEmailValid，当这个变量是false时，边框应该出现，否则不会。我的代码如下：

HTML：

<input type="email" class="form-validation" [ngClass]="{'invalid': isEmailValid}"

TS：

//make service call and decide whether email is valid or not
if(value){            //value is the service response
    this.isEmailValid = true;
} else {
    this.isEmailValid = false;
}

在上面的代码之后，该类没有得到应用。我哪里错了？请指导。

Answer 1

你忘了把.放在css中的form-validation。休息看起来很好。

CSS

更改

form-validation.invalid {
    border: 2px solid red
}

至

.form-validation.invalid {
    border: 2px solid red
}

TS

//进行服务电话并确定电子邮件是否有效

if(value){            //value is the service response
    this.isEmailValid = true;
} else {
    this.isEmailValid = false;
}

工作样本在这里 - https://stackblitz.com/edit/angular-ejvaau

Answer 2

在这两种情况下，你设置值true。这是一个错误。

if(value){            //value is the service response
    this.isEmailValid = true;
} else {
    this.isEmailValid = true;
}