Угловой материал - как настроить ввод на красный

Question

Для приведенного ниже углового кода матричная форма будет автоматически отображаться красным, если она не заполнит какое-либо значение.

<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())}"/>

Это должно работать.