表单标签的自定义样式

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文件中的css下面

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

  .success {
    color:green;
    background-color: #ffffff;
  }
}