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

в обоих случаях вы устанавливаете значение true.что является ошибкой.

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

Answer 2

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

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