Angular 2: Add a class dynamically in ngFor

Question

I am trying to add a class dynamically inside *ngFor. When I enter invalid text in textbox, it will change the textbox border to red color.

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>

script

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);
        }        
    }

The problem I have is when invalid text is entered, red color is applying to all textboxes, not just the one that is invalid. How can I make it more dynamic?

Stefan Svrkota · Accepted Answer · 2016-10-20 09:32:57Z

1

Problem is that you are using one same value (value of variable errcolor) in all ngClass directives, so if one of the inputs is invalid, all of them are marked as invalid. You can do something like this:

<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>

And your validate method:

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

edited Oct 20, 2016 at 9:32

answered Oct 20, 2016 at 9:20

Stefan Svrkota

50.9k10 gold badges100 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular 2: Add a class dynamically in ngFor

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related