Угловой 2: добавьте класс динамически в ngFor

Question

Я пытаюсь добавить класс динамически внутри * ngFor. Когда я ввожу неверный текст в текстовое поле, он изменит границу текстового поля на красный цвет.

HTML

<div *ngFor="let appt of appointments"> 
    <div class="ctrl-wpr" *ngIf="appt.personVitals && appt.personVitals.weight"> 
     <md-input class="ctrl-wpr__ctrl" [(ngModel)]="appt.personVitals.weight.weight" [ngClass]="{'error_bgcolor': errcolor }" (keyup)="validate(appt.personVitals.weight.weight)" 
      (blur)="updatePersonvitals(appt.personVitals.weight, 'kgs', appt.patientInfo.id)"> 
     </md-input> 
    </div> 
</div> 

сценарий

validate(wt: any) { 
     if (/^\d+(\.\d{1,3})?$/.test(wt)) { 
      this.errcolor = false; 
     } 
     else { 
      this.errcolor = true; 
     } 
    } 

CSS

.error_bgcolor { 
     .md-input-underline .md-input-ripple { 
      background-color: red; 
      opacity: 1; 
      -webkit-transform: scaleY(1); 
      transform: scaleY(1); 
     }   
    } 

У меня есть проблема, когда неверный текст , красный цвет применяется ко всем текстовым полям, а не только к недопустимым. Как я могу сделать его более динамичным?

Answer 1

Проблема заключается в том, что вы используете одно и то же значение (значение переменной errcolor) во всех директивах ngClass, поэтому, если один из входов недействителен, все они отмечены как недействительные. Вы можете сделать что-то вроде этого:

<div *ngFor="let appt of appointments"> 
    <div class="ctrl-wpr" *ngIf="appt.personVitals && appt.personVitals.weight"> 
     <md-input class="ctrl-wpr__ctrl" [(ngModel)]="appt.personVitals.weight.weight" [ngClass]="{'error_bgcolor': validate(appt.personVitals.weight.weight)}" (keyup)="validate(appt.personVitals.weight.weight)" 
     (blur)="updatePersonvitals(appt.personVitals.weight, 'kgs', appt.patientInfo.id)"> 
     </md-input> 
    </div> 
</div> 

И ваш метод проверки:

validate(wt: any) { 
    if (/^\d+(\.\d{1,3})?$/.test(wt)) { 
     return false; 
    } 
    else { 
     return true; 
    } 
}