Пользовательский стиль для метки формы

Question

После отправки формы и получения обратного вызова от API, если на входе есть какая-либо ошибка, я бы хотел, чтобы цвет текста метки стал красным, если нет ошибок, он станет зеленым.

1. Я знаком с jQuery, например, $('#labelUsername').addClass('danger');, но как это сделать в ionic 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;
  }
}