时间戳

首页 > 解决方案 > 根据输入的值 Angular 更改输入的文本颜色

css - 根据输入的值 Angular 更改输入的文本颜色

问题描述

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

标签： cssangularangular7

解决方案

如果您正在使用，请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

推荐阅读