Я создал асинхронную пользовательскую проверку для моей формы angular. Валидатор проверяет массив электронных писем, чтобы узнать, зарегистрирован ли уже введенный пользователем адрес электронной почты (или нет, как на обычном экране входа в систему c). Я сделал это асинхронно, чтобы просто имитировать c получение данных с сервера.
У меня проблема в том, что когда пользователь вводит незарегистрированный адрес электронной почты, хотя сообщение об ошибке отображается правильно в пользовательском интерфейсе, проверив, присутствует ли сообщение об ошибке в моем объекте формы, в консоль также записывается сообщение об ошибке: «TypeError: Невозможно прочитать свойство 'emailIsNotRegistered' of null».
Это почти как если бы обещание возвращало правильную пару ключ-значение {'emailIsNotRegistered': true}, но затем также возвращало 'null'.
Вот пользовательский валидатор:
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;
}
Вот где валидатор добавляется в элемент управления формы электронной почты:
ngOnInit() {
this.logInForm = new FormGroup({
'email': new FormControl(null, [Validators.required, Validators.email], this.unregisteredEmail.bind(this)),
'password': new FormControl(null, [Validators.required])
})
}
Тег ввода электронной почты от html:
<input class="input" type="text" id="email" name="email" formControlName="email">
This html элемент, который добавляется, если пользователь вводит адрес электронной почты, который еще не зарегистрирован:
<span *ngIf="logInForm.get('email').errors['emailIsNotRegistered'] && logInForm.get('email').touched">No account found with this email address. Register below!</span>
Наконец, массив selectedEmails:
registeredEmails = ['52pbailey@gmail.com', 'sammie-midnight@hotmail.co.uk'];