html - 如何在 Angular 中将空的必需输入字段警报颜色显示为蓝色？

Question

这是我的输入字段，当此输入字段为空或无效时，我将此输入字段设置为必填，当时它显示红色警报，但我想用蓝色警报显示此输入字段，这怎么可能？

<mat-form-field>
  <input matInput placeholder="Type Message" [(ngModel)]="mytext" #bigicon="ngModel" required>
  <button matSuffix mat-icon-button [disabled]="largeicon.errors && largeicon.errors.required || (bigicon.errors && bigicon.errors.required)" (click)="sendMessage()">
    <div><mat-icon style="cursor: pointer;" [inline]="true">send</mat-icon></div>
  </button>  
</mat-form-field>

Answer 1

您可以使用 ngClass 将 background-color 设置为您想要的颜色。

你的 CSS 文件

.custom-invalid {
  background-color: lightblue; // just use the blue you want
}

还有你的 HTML 文件:

<mat-form-field>
  <input matInput placeholder="Type Message" [(ngModel)]="mytext" #bigicon="ngModel" required [ngClass]="{'custom-invalid': bigicon.errors || mytext === ""}">
  <button matSuffix mat-icon-button [disabled]="largeicon.errors && largeicon.errors.required || (bigicon.errors && bigicon.errors.required)" (click)="sendMessage()">
    <div><mat-icon style="cursor: pointer;" [inline]="true">send</mat-icon></div>
  </button>  
</mat-form-field>

这样，如果 bigicon 有任何错误或您的 mytext 属性为空，它将设置一个具有自定义背景颜色的类。如果此 bigicon.errors 还验证属性是否为空，则您不需要 || mytext === ""

希望这对您有所帮助。