表单标签的自定义样式

Question

在提交表单并从API接收回调时，如果输入有任何错误，我希望使标签文本颜色变为红色，如果没有错误，则变为绿色。

1. 我熟悉jQuery的方法，例如$('#labelUsername').addClass('danger');，但如何在离子3中做到这一点
2. 什么是我自己定制造型的正确方式
3. 将来，如果可能的话，我可能还会在标签上添加图标(附加(

CSS

.danger {
color:red;
}
.success {
color:green;
}

HTML

<ion-item>
<ion-label id="labelCustomer">Customer</ion-label>
<ion-input [(ngModel)]="customer" name="customer" type="text" text-right></ion-input>
</ion-item>

TS

let headers: any = new HttpHeaders({ 'Content-Type': 'application/x-www-form-urlencoded' }),
options: any = { formValue },
url: any = "[urlhere]";
this.http.post(url, options, headers)
.subscribe((data: any) => {
if(data.error){
// $('#labelCustomer').addClass('danger'); <-- something like this
}
},
(error: any) => {
console.log(error);
});

Answer 1

下面是可以用来实现相同的代码

<ion-badge [ngClass]="changecolor">Customer</ion-badge>

在component.ts文件中定义changecolor变量，如：

let headers: any = new HttpHeaders({ 'Content-Type': 'application/x-www-form-urlencoded' }),
options: any = { formValue },
url: any = "[urlhere]";
this.http.post(url, options, headers)
.subscribe((data: any) => {
if(data.error){
//define class name
this.changecolor = "danger"
}else{
this.changecolor = "success"
}
},
(error: any) => {
console.log(error);
});

将css放在scss文件中

page-login {
.danger {
color:red;
background-color: #ffffff;
}
.success {
color:green;
background-color: #ffffff;
}
}