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

Angular 2：在ngFor中动态添加一个类

1 个答案: