如何在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