角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

すべてのngClassディレクティブに同じ値（変数の値はerrcolor）が使用されているため、いずれかの入力が無効な場合、それらのすべてが無効としてマークされるという問題があります。

<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メソッド：

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