How to edit CSS-Met form field outline?

I have a stepper form that will allow the user to edit details from previously saved data. The Form field will display a warning when the form is loaded when the previous data is incorrect. Warning text appears but no outline. Outline should be yellow, even with warning text. The yellow outline is working when the user starts editing the form, but it should appear when loaded. Here is the code:

<mat-form-field
                appearance="outline"
                class="width-1"
                [ngClass]="{
                  'mat-form-field-invalid warning': deptAeroWarning
                }"
              >
                <mat-label>Departure Aerodrome (ICAO)</mat-label>
                <input
                  maxlength="4"
                  matInput
                  name="departureAerodrome"
                  id="departureAerodrome"
                  formControlName="departureAerodrome"
                  placeholder="Departure Aerodrome (ICAO)"
                  (input)="inputDeptAero(departure.value)"
                  #departure
                  required
                />
                <mat-error *ngIf="!deptAeroWarning"
                  >Error! The ICAO code is not correct. The length should be
                  4 characters.</mat-error
                >
                <mat-hint class="warning" *ngIf="deptAeroWarning">{{
                  icaoWarningMsg
                }}</mat-hint>
              </mat-form-field>

The CSS code for the warning text is:

::ng-deep .mat-hint.warning {
  color: #fbbb21;
}

The outline code is:

::ng-deep
  .mat-form-field-appearance-outline.mat-form-field-invalid.mat-form-field.mat-form-field-invalid.warning
  .mat-form-field-outline-thick {
  color: #fbbb21 !important;
  opacity: 0.8 !important;
}

But, this is how it should be when the form is loaded.

Write a Comment

Your email address will not be published. Required fields are marked *