角度材质-如何将输入设置为红色

Question

对于以下角度代码，如果未填写任何值，则该mat-form将自动显示为红色。

<mat-form-field>
    <input matInput placeholder="Enter your email" [formControl]="email" 
     required>
</mat-form-field>

但是，在以下情况下，我添加了onblur以通过打字稿checkOrderNo()方法进行验证，但是mat-form-field不会变为红色。...

请帮助

<mat-form-field>
      <input matInput [blur]="checkOrderNo()" placeholder="Enter your order no" [formControl]="orderno">
 </mat-form-field>

checkOrderNo(): boolean
{
  if (this.orderno > 1000001) {return false;}
  else {return true;}
}

Answer 1

您可以创建两个包含所需颜色的CSS类，例如：

.red {
   color:red;
}
.green {
   color:green;       
}

然后您可以通过以下方式在条件下使用 ng-class ：

        <input matInput placeholder="Enter your order no" [formControl]="orderno" 
                        ng-class="{red: (checkOrderNo()), green: (!checkOrderNo())}"/>

这应该有效。