Material Angular Material Inputs 7 Error Displayed

Question

Good evening, I am creating this form, and it is presenting a strange display error. Using Angular Material 7. Has anyone had similar problems? Follows html content:

<div class="flex-box">
  <div class="card large">
    <div class="card-image">
      <img
        src="https://simple-class-images.s3-sa-east-1.amazonaws.com/background-75.png"
        alt="logomarca" />
      <span class="card-title">
        <div class="row s4 offset-s2">
          <img src="https://simple-class-images.s3-sa-east-1.amazonaws.com/logomarca.png" alt="logomarca" />
          <p class="center-align">Always at your fingertips</p>
        </div>
      </span>
    </div>
    <div class="card-content">
      <div class="flex-box">
        <h5 id="sigInMessage">Sign In</h5>
      </div>
      <div class="flex-box">
        <app-auth-button [value]="googleAuthButton" (value)="reciverFeedback($event)"></app-auth-button>
      </div>
      <div class="flex-box">
        <app-auth-button [value]="facebookAuthButton" (value)="reciverFeedback($event)"></app-auth-button>
      </div>
      <div class="flex-box">
      </div>
      <div class="flex-box">
        <form [formGroup]="loginForm" (ngSubmit)="ngSubmit()">
          <mat-form-field class="email" appearance="standard">
            <mat-label>Email or User</mat-label>
            <input matInput formControlName="email" type="email" placeholder="Email or User" (blur)="checkEmail()" />
            <mat-error *ngIf="usernameNotFound">{{ usernameNotFoundMessage }}</mat-error>
            <mat-error *ngIf="emailFormCtrl.invalid">{{ getEmailErrorMessage() }}</mat-error>
          </mat-form-field>
          <mat-form-field class="password" appearance="standard" *ngIf="usernameIsValid">
            <mat-label>Passord</mat-label>
            <input matInput formControlName="password" #passwordField [type]="passwordHide ? 'password' : 'text'"
              placeholder="Password" autofocus />
            <mat-icon matSuffix (click)="passwordHide = !passwordHide">
              {{passwordHide ? 'visibility_off' : 'visibility'}}
            </mat-icon>
            <mat-error *ngIf="passwordFormCtrl.invalid">{{ getPasswordErrorMessage() }}</mat-error>
          </mat-form-field>
          <div class="input-group">
            <button mat-raised-button color="primary" [disabled]="!loginForm.valid">Login
            </button>
          </div>
        </form>
      </div>
      <div class="card-action center-align">
        <button mat-button (click)="openDialogRecoveryPassword()">Forgot password?</button>
        <button mat-button (click)="openDialogRegister()">Create Account</button>
      </div>
    </div>
  </div>
</div>

Answer 1

I ended up discovering with the help of a friend that the import of another css library was impacting on the material component itself, when I removed the import the problem was fixed.