Angular ngClass: динамическое применение класса
Я не могу установить класс динамически. Пожалуйста, проведите меня. Спасибо.
У меня есть класс в файле 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;
}
После приведенного выше кода класс не применяется. Где я ошибаюсь? пожалуйста, руководство.
Пожалуйста, предоставьте минимальный воспроизводимый пример на stackblitz, так как мы действительно не можем сказать, в чем проблема, без его рабочего воспроизведения.
@MilosKovacevic, это была просто опечатка, я ее исправил.
@trichetriche, а если все это заблокировано с рабочего места, то же самое и в моем случае.
Если stackblitz заблокирован (в чем я очень сомневаюсь, но позвольте вам поверить), у вас все еще есть JSFiddle, Codepenn github и многие другие.
Какое значение по умолчанию для isEmailValid?
Ответы 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
аааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааа .аа. Ааа. Это - ошибка.
Ваш код в порядке - проверьте здесь - stackblitz.com/edit/angular-ejvaau. Пожалуйста, воспроизведите ту же проблему в stackblitz
в обоих случаях вы устанавливаете значение true. что является ошибкой.
if (value){ //value is the service response
this.isEmailValid = true;
} else {
this.isEmailValid = true;
}
Проверьте свой css, вам нужно поставить (.) Перед проверкой формы (.form-validation.invalid)