Angular изменить цвет текстового поля, когда пользователь «покидает» его, ничего не печатая

Question

По сути, я создал текстовое поле, которое выглядит следующим образом

 <input type="text" class="form-control required" [(ngModel)]="formName">

Класс CSS required (обязательный) меняет фон текстового поля на желтый. Моя цель - изменить цвет фона этого текстового поля на красный всякий раз, когда пользователь щелкает внутри текстового поля (фокус, в основном хочет что-то написать внутри) и уходит, ничего не печатая (оставляя его пустым).

Я пытался работать с [ngClass], что-то вроде этого:

 <input type="text" class="form-control required"  [(ngModel)]="formName" [ngClass]="{'testRed': !formName}">

Проблема в том, что он красный с самого начала, так как 'formName' пуст с самого начала, и это правильно , Есть ли какое-нибудь умное решение без вызова функции внутри файла .ts?

Answer 1

Вы можете определить стиль для поля ввода во внешнем файле css, включив ng-invalid, чтобы гарантировать, что цвет текстового поля изменяется, когда поле недопустимо, и включить ng-touch, чтобы гарантировать, что цвет изменяется только когда пользователь коснулся поля по крайней мере один раз. Это гарантирует, что у вас не было этого измененного цвета с самого начала.

input.ng-invalid.ng-touched {
    background-color : solid-red;
}

Answer 2

Вы также должны проверить на грязное состояние.

Допустим, имя формы frmTest -

<input type="text" class="form-control required"
[(ngModel)]="formName"
[ngClass]="!formName && frmTest.get('formName').dirty ?? 'red' : 'yellow' ">