How to make 'email' input filed error message to display outside the input box?

Question

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.

Answer 1

Remove <div *ngIf="isFieldValid('username')">

Answer 2

Inside Html file go this way:

<form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
    <div class="form-group">
        <label>First Name</label>
        <input type="text" formControlName="firstName" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.firstName.errors }" />
        <div *ngIf="submitted && f.firstName.errors" class="invalid-feedback">
            <div *ngIf="f.firstName.errors.required">First Name is required</div>
        </div>
    </div>
<form/>

And In TS File:

export class AppComponent implements OnInit {
    registerForm: FormGroup;
    submitted = false;

    constructor(private formBuilder: FormBuilder) { }

    ngOnInit() {
        this.registerForm = this.formBuilder.group({
            firstName: ['', Validators.required]
        });
    }

    // convenience getter for easy access to form fields
    get f() { return this.registerForm.controls; }

    onSubmit() {
        this.submitted = true;

        // stop here if form is invalid
        if (this.registerForm.invalid) {
            return;
        }

        alert('SUCCESS!! :-)\n\n' + JSON.stringify(this.registerForm.value))
    }
}

And this Line <div *ngIf="isFieldValid('username')"> doesn't allow to create div totally