Dúvida sobre validação

Bom, segue a solução. O pulo do gato é declarar uma variável de template no formulário e consultar a propriesdade .submitted em cada condição do ngIf. Você precisa também remover o [disabled] do botão para que esteja habilitado. Mas isso não é suficiente, você precisa colocar uma condição if na submissão. Segue a solução completa:

<h4 class="text-center">Login</h4>

<!-- olha aqui a variável formDir -->
<form #formDir="ngForm" [formGroup]="loginForm" class="form mt-4" (submit)="login()">

    <div class="form-group">
        <input #userNameInput
            formControlName="userName" 
            class="form-control" 
            placeholder="user name" 
            autofocus>
<!--  veja aqui a condição && -->          
        <ap-vmessage   
*ngIf="loginForm.get('userName').errors?.required && formDir.submitted"
            text="User name is required!">
        </ap-vmessage>        
    </div>

    <!-- o restante é a mesma coisa -->
    <!-- veja que não há mais o disabled -->
    <button 
        type="submit" 
        class="btn btn-primary btn-block">
        login
    </button>

</form>

<p>Not a user? <a [routerLink]="['signup']">Register now</a></p>

Agora, no componente você faz o if:

    login() {
       // olha o if aqui
        if(this.loginForm.valid) {
             // código da submissão aqui dentro

         }
        }

Sucesso e bom estudo!

Atualizei a resposta anterior.

Aguardo seu feedback para saber se esta tudo certinho.