Asynchronous custom validation issue - html

Question

I have created an asynchronous custom validation for my angular form. The validator checks an array of emails to see if the email that the user has entered is already registered or not (like you would get on a generic log in screen). I have done this asynchronously to simply mimic the retrieval of data from a server.
The issue I am having is that when an unregistered email address is entered by the user, although the error message is correctly displayed on the UI by checking whether the error message is present in my form object, an error message is also logged to the console: "TypeError: Cannot read property 'emailIsNotRegistered' of null".
It's almost as if the promise is returning the correct key value pair {'emailIsNotRegistered': true}, but is then also returning 'null'.
Here is the custom validator:
unregisteredEmail(control: FormControl): Promise<any> | Observable<any> {
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
if(this.registeredEmails.indexOf(control.value) === -1) {
resolve({'emailIsNotRegistered': true})
} else {
resolve(null);
}
}, 1500)
});
return promise;
}
Here is where the validator is added to the email form control:
ngOnInit() {
this.logInForm = new FormGroup({
'email': new FormControl(null, [Validators.required, Validators.email], this.unregisteredEmail.bind(this)),
'password': new FormControl(null, [Validators.required])
})
}
The email input tag from html:
<input class="input" type="text" id="email" name="email" formControlName="email">
This html element that is added if the user enters an email address which isn't already registered:
<span *ngIf="logInForm.get('email').errors['emailIsNotRegistered'] && logInForm.get('email').touched">No account found with this email address. Register below!</span>
An finally, the registeredEmails array:
registeredEmails = ['52pbailey#gmail.com', 'sammie-midnight#hotmail.co.uk'];