css – How to modify mat-form-field outline?


I have a stepper form which will allow the user to edit the details from the previously saved data. The form-field must show a warning upon loading of the form when the previous data is invalid. The warning text is displaying but the outline is not. The outline should be color yellow, the same with the warning text. The yellow outline is only working when the user starts to edit the form, but it should display upon loading.
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>

Here is the css code for the warning text:

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

Here is the code for the outline:

::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;
}

Here is the screenshot of the current situation
But, it should be like this upon loading of the form



Source link

Latest articles

Related articles

Leave a reply

Please enter your comment!
Please enter your name here