How can the outline color be changed conditionally for the <mat-form-field> element in Angular?

edit

To change the outline color conditionally for the <mat-form-field> element in Angular, you can use Angular's property binding syntax and define a variable or expression that determines the color. Here is an example:

<mat-form-field [color]="isError ? 'warn' : 'primary'">
  <input matInput placeholder="Enter your name">
</mat-form-field>

In this example, the outline color of the <mat-form-field> element will be set to 'warn' (red) if the variable 'isError' is true, and 'primary' (blue) if it is false.

You can define the 'isError' variable in your component's TypeScript code and update it based on some condition, such as a form validation error.