I try to use an Angular Material field and to respond to user input, e.g. if there is something wrong, it should mention the error. I have down stripped the code to a short part where just a password is shown. I know that there is a validation object from reactive, that I can ask regarding the validation problems, e.g. required, minlength, maxlength etc. I also know, that I can make an @if () where I can include the mat-error tag only if the field is touched and/or changed.
My problem is that it shows the error border of the outline field from the beginning and not only, if there was an input. Does anybody can tell me or link me to a page where the combination of validation an angular material outline fields is explained so I have the red border only if the cursor has been in the field and leaving the field there is a validation problem?
Best regards and wishes for 2025
Parascus
<mat-form-field appearance="outline" hideRequiredMarker>
<mat-label>Password</mat-label>
<input matInput type="password" id="password">
<mat-error>
<span class="form-error">Error in password</span>
</mat-error>
</mat-form-field>
