Запретить ngClass в angular 8 при загрузке формы

Question

У меня есть поле ввода, подобное этому

mycomp onet. html

 <input #first_name="ngModel" [ngClass]="{'red-border-class': first_name.errors}" type="text" name="first_name" class="form-control" id="first_name" [(ngModel)]="student.first_name" pattern="[a-zA-Z0-9\s]+" required>

и mystyle. css like

.red-border-class { border: 1px solid red; }

Проблема является ли ngClass примененным вначале, когда я загружаю страницу, и что он должен применять, когда пользователь касается поля ввода и не вводит ничего ... Как я могу решить эту проблему?.

Answer 1

посмотрите, верно ли ваше first_name.errors. Так как ngClass добавляет имя класса только тогда, когда условие true

[ngClass]="{'my-class':true}"
[ngClass]="{'my-class':false}"

Здесь в первом случае будет применяться только класс my-class, но не во втором случае, как условие ложно.

Answer 2

Попробуйте это:

[ngClass]="{'red-border-class': first_name.errors && first_name.dirty}"

Обратитесь по ссылке ниже, чтобы лучше понять формы реагирования:

https://angular.io/guide/reactive-forms

Надеюсь, что это работы

Answer 3

Попробуйте это:

[class.red-border-class]="first_name.invalid && first_name.touched"