Как изменить цвет matInput, если он заполнен

Question

У меня есть этот шаблон для matInput

 <mat-form-field class="group-name" [color]="groupWithSameName ? 'warn' : 'accent'">
    <input [title]="groupWithSameName ? 'The name already exists' : ''" [(ngModel)]="groupName" (ngModelChange)="getGroupWithSameName()" matInput>
  </mat-form-field>

Однако вход изменит цвет только тогда, когда я щелкну по нему, есть ли способ изменить цвет, не щелкая? Как будто я просто хочу, чтобы он менял цвет при заполнении.

Answer 1

Вам просто нужна дополнительная переменная, чтобы проверить, заполнено ли поле ввода или нет, и два css класса

Например, в css файле сделайте эти два класса

 .warn{
    color:yellow;
}

. accent{
   color:green;
}

Теперь в файле html в поле ввода определите событие изменения, например, и нужно использовать

  <input   #searchBox  
  [ngClass]="isValuePresent?'accent': 'warn'"
  (change)="somethingChanged(searchBox.value)">


             Or 


<input #searchBox (keyup)="search(searchBox.value)"
    [ngClass]="isValuePresent ? 'accent' : 'warn'">

Итак, в файле ts вам нужно определить одну переменную, например isValuePresent, например,

public isValuePresent=false;

public search(searchedValue:String){
// Set the variable based on value by checking is string 
empty
}

Просто показал это как простой пример в mat-input, просто поместите ngclass там, где у вас есть цветовая директива, и в поле ввода определите функцию изменения, которую ваша работа будет выполнена ... !!

И вам нужно передать значение, передавая входную ссылку, как я показал #

Надеюсь, это сработает для вас, просто утвердите его, если он работает, и проголосуйте за него тоже. :)