Mensagem de validacao | Angular parte 2: Autenticação, Forms e lazy loading

Ola, minha mensagem "Username Required" ja aparece quando eu carrego o form... como fazer aparecer somente no submit? Estou usando Angular Material.

    <mat-card-header>
      <mat-card-title>Login</mat-card-title>
    </mat-card-header>
    <mat-card-content>
      <form [formGroup]="loginForm">
        <p>
          <mat-form-field appearance="fill"  class="full-width">
            <mat-label>Username</mat-label>
            <input matInput formControlName="username" placeholder="username" name="username" autofocus>
            <mat-hint class="hint-error" *ngIf="loginForm.get('username').errors?.required">Username required</mat-hint>
          </mat-form-field>
        </p>
        <p>
          <mat-form-field appearance="fill"  class="full-width">
            <mat-label>Password</mat-label>
            <input matInput formControlName="password" placeholder="password" name="password" type="password">
            <mat-hint class="hint-error" *ngIf="loginForm.get('password').errors?.required">Password required</mat-hint>
          </mat-form-field>
        </p>
      </form>
    </mat-card-content>
    <mat-card-actions>
      <button [disabled]="loginForm.invalid" mat-raised-button (click)="login()">Login</button>
    </mat-card-actions>
</mat-card>

<form [formGroup]="myForm" (submit)="save()"> <input formControlName="name"/> <span *ngIf="myForm.get('name').touched && myForm.get('name').errors?.required">Required field</span> <button type="submit">Save</button> </form>