mat-form-field validation messages dispalying before any user interaction

Here is the code for reference,

<div>
<mat-form-field class="w-100 mt-2" appearance="outline">
<mat-label>Enter a name for your quote</mat-label>

<input #quoteName matInput placeholder="Enter a name for your quote" formControlName="quoteName" [maxlength]="40" (input)="onQuoteNameInput($event)" />
<mat-hint align="end">{{quoteName.value.length}} / 40</mat-hint>
<mat-error *ngIf="quoteDetailsFormGroup.controls.quoteName.touched && quoteDetailsFormGroup.controls.quoteName.errors?.required">Quote Name is
required.</mat-error>
</mat-form-field>
</div>


In the code above, I am using the touched property to control the display of error messages, so I can successfully show or hide them as needed. However, the input field's outline border still appears red as soon as the form loads. How can I prevent the red outline from appearing initially?

Continue reading...