Angular ngClass: применять класс динамически

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

Вы забыли поставить . в form-validation в css. Остальные выглядят хорошо.

CSS

+ Изменить

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

в

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

Т.С.

// сделать сервисный звонок и решить, является ли электронная почта действительной или нет

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