I'm using reactive-form and have multiple input fields with respective mat-error for each. All of the input fields error messages appear outside of the input box, which is correct and is by default. But the email input field is the only one, that it's error message appears inside the input field.
Here's the code
<!-- username -->
<div class="">
<mat-form-field class="">
<input type="email" matInput
placeholder="Email"
formControlName="username" required>
<div *ngIf="isFieldValid('username')">
<mat-error
*ngIf="modelForm.controls['username'].hasError('required')
&&
modelForm.get('username').touched">
This is required
</mat-error>
<mat-error
*ngIf="modelForm.controls['username'].hasError('pattern')">
Email invalid
</mat-error>
<mat-error
*ngIf="!modelForm.controls['username'].hasError('required')
&&
!modelForm.controls['username'].hasError('pattern')
&&
modelForm.controls['username'].hasError('isDupe')">
This email has been used already
</mat-error>
</div>
</mat-form-field>
</div>
<!-- password -->
<div class="">
<mat-form-field class="">
<input matInput type="password" placeholder="Password"
formControlName="password" required>
<mat-error
*ngIf="password.hasError('required')">
This is required
</mat-error>
<mat-error
*ngIf="password.hasError('pattern')">
Password should contain at least one number
</mat-error>
</mat-form-field>
</div>
I want to make email error message appear below input field similar to the password error message.