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

希望这可以帮助。

Answer 2

您可以更改如下 -

/deep/ .mat-form-field.mat-form-field-invalid .mat-form-field-label{
  color: blue;
}


/deep/ .mat-form-field.mat-form-field-invalid .mat-form-field-label .mat-form-field-required-marker, /deep/ .mat-form-field.mat-form-field-invalid .mat-form-field-label.mat-accent{
   color: blue;
}

/deep/ .mat-form-field.mat-form-field-invalid .mat-form-field-ripple, /deep/ .mat-form-field.mat-form-field-invalid .mat-form-field-ripple.mat-accent{
  background-color: blue;
}

工作演示在这里https://stackblitz.com/edit/angular-disable-file-input-on-radio-xej1gx