Validating on Submit

HTML

<form [formGroup]="form" (ngSubmit)="login()">
    <div *ngIf="form.errors" class="alert alert-danger">
        The username or password is invalid. 
    </div>
    <div class="form-group">
        <label for="username">Username</label>
        <input 
        formControlName="username"
            id="username" 
            type="text" 
            class="form-control form-control-lg">
            <div *ngIf="username.pending">Checking for uniqueness...</div>
            <div *ngIf="username.touched && username.invalid" 
                 class="alert alert-danger">
                    <div *ngIf="username.errors.required">Username is required</div>
                    <div *ngIf="username.errors.minlength">
                        Username should be minimum  
                            {{ username.errors.minlength.requiredLength }}     
                        charatcers
                    </div>
                    <div *ngIf="username.errors.maxlength">
                        Username should be maximum  
                            {{ username.errors.maxlength.requiredLength }}     
                        charatcers
                    </div>
                    <div *ngIf="username.errors.cannotContainSpace">
                        Username can not contain space
                    </div>
                    <div *ngIf="username.errors.shouldBeUnic">
                        This username is already taken
                    </div>
            </div>
    </div>
    <div class="form-group">
        <label for="password">Password</label>
        <input 
        formControlName="password"
            id="password" 
            type="text" 
            class="form-control form-control-lg">
    </div>
    <button class="btn btn-dark btn-lg" type="submit">
        Sign Up
    </button>
</form>

TS

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { UserNameValidators } from '../common/validators/username.validators';

@Component({
  selector: 'signup-form',
  templateUrl: './signup-form.component.html',
  styleUrls: ['./signup-form.component.scss']
})
export class SignupFormComponent {
  form = new FormGroup({
    username: new FormControl('', 
      Validators.required,
      UserNameValidators.shouldBeUnic,
    ),
    password: new FormControl('', Validators.required)
  });

  login(){
      this.form.setErrors({
        invalidLogin: true
      });
  }

  get username() {
    return this.form.get('username');
  }
}

Validation.ts

import { AbstractControl, ValidationErrors } from "@angular/forms";

export class UserNameValidators{
    static cannotContainSpace(control: AbstractControl) : ValidationErrors | null {
        if((control.value as string).indexOf(' ') >= 0)
            return { cannotContainSpace: true }
        return null;
    }

    static shouldBeUnic(control: AbstractControl) : Promise < ValidationErrors | null > {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                if(control.value === 'gabor')
                    resolve({ shouldBeUnic: true });
                else 
                    resolve(null);
            }, 2000);
        });
    }
}