Изменение цвета текста ввода в зависимости от его значения, Angular

Question

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

<div class="form-group">
  <label class="col-md-4">What is the capital city of Italy?
  </label>
  <input type="text" class="form-control" formControlName="first_question" #first_question />
</div>

Итак, я хочу сделать цвет ввода красным, если пользователь не введет правильный ответ, который рим?Есть идеи?Я попробовал это, но это не сработало:

placeholder="Type" [style.color]="Type === 'rome' ? 'red' : 'green'"

Answer 1

Если вы используете Reactive Forms, используйте:

this.your_formgroup.get('first_question').value

Таким образом, HTML-код будет:

<div [formGroup]="your_formgroup">
    <mat-form-field>
        <input matInput placeholder="Input" formControlName="first_question" [style.color]="this.your_formgroup.get('first_question').value === 'rome' ? 'red' : 'green'">
    </mat-form-field>
</div>

Без FormGroup:

• Удалено formControlName

• Использовано .toLowerCase(), поскольку Rome и rOmE являются действительными входными данными:)

HTML код:

<mat-form-field>
        <input matInput placeholder="Input" [(ngModel)]="first_question" [style.color]="first_question.toLowerCase() === 'rome' ? 'red' : 'green'">
</mat-form-field>

TS:

first_question: any = "";

WORKING_DEMO

Answer 2

сначала нужно объявить переменную в TS.

    TheCapitalOfItaly:string = '';

затем в html:

[(ngModel)]=="TheCapitalOfItaly" [style.color]="TheCapitalOfItaly=== 'rome' ? 'green' : 'red'"