Как отобразить пустой необязательный цвет поля ввода синим цветом в 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