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'"

根据输入值的角度更改输入文本的颜色

2 个答案: