htmlinputangular-materialfield

Angular Material: set the border color of an input field embedded within mat-form-field

I'm using Angular Material 21. The component's template has two <mat-form-field> elements, each one contains an <input> element. I would like to set a red border to the first input element by code if some condition is true.
The complete example is on stackblitz.

This is the template with the two input fields:

<form (ngSubmit)="submit()">
    <div id="ContactInput" fxLayout="column">
      <mat-form-field appearance="outline">
          <mat-label class="placeholder">first</mat-label>
          <input matInput type="text" />
      </mat-form-field>
      <mat-form-field appearance="outline">
          <mat-label class="placeholder">second</mat-label>
          <input matInput type="text" />
      </mat-form-field>
    </div>
</form>

I already achieved to set a red border for both input elements, with this CSS (found here):

.mat-form-field-appearance-outline .mat-form-field-outline {
  color: red;
}

How can I apply the border only for the first input field ?
Thank you for any advice.

Solution

  • We are going to need more details to help like what condition needs to be met?

    I made the condition to be that if you clicked in the first input that it would trigger the condition to be true. Then to turn it off just click the input again. I created a class called red-outline and when the condition is true then, it will apply that class what has the red border in the CSS file.

    Click here to see the code on stackblitz.