*ngIf showing div before it is supposed to - asynchronous

Question

In a simple form, I added an input, and a div for the error. Like this
<input
formControlName="username"
id="username"
type="text"
class="form-control">
<div *ngIf="username.touched && username.invalid" class="alert alert-danger">
<div *ngIf="username.errors.required" >Username is required</div>
<div *ngIf="username.errors.shouldBeUnique">Username is not unique</div>
</div>
I also created a class that holds the shouldBeUnique verifier, like so:
static shouldBeUnique(control: AbstractControl): Promise<ValidationErrors | null>
{
return new Promise((resolve, reject) => {
console.log('START');
setTimeout(() => {
console.log(control);
if((control.value as string) == 'asd')
resolve({ shouldBeUnique: true});
else
resolve(null);
}, 2000);
});
}
Here is the component.ts
export class SignupFormComponent {
form = new FormGroup({
username: new FormControl('',[
Validators.required,
UsernameValidators.shouldBeUnique
]),
password: new FormControl('', Validators.required),
});
get username(){
return this.form.get('username');
}
}
Now, the thing is, in the tutorial I'm looking, when the teacher types 'asd' in the username input field, after 2 seconds, the div with corresponding error is displayed.
When I type 'asd' in my field, the div with error is displayed immediately, and with no message. I just get a red div with no text whatsoever.
His and my code are the same, BUT he is using angular 4, and I'm using angular 6.
The purpose of this code is to simulate and explain the async calls. That's why this code makes no scence in real project. It's just a simulation.
Is there a difference between A4 and A6 that makes the difference in my case?
Why is my div for errors showing right when I change focus, rather then wait for 2s?
How can I get the result that he is getting?
I hope I provided enough info, im totaly new to angular.