Working with Angular5, I have a project page that includes an upload feature using a core upload component from my organization. Users can upload up to 5 files and must fill in the email field before clicking the "upload" button.
My goal is to trigger a service call as soon as the user exits the email field, displaying an error message based on the response received.
I am implementing this functionality as follows:
Component HTML
<my-upload-compt (validateEmail)="checkEmail($event)" [isEmailValid]="isEmailValid"></my-upload-compt>
Component TypeScript
isEmailValid: BehaviorSubject<boolean>;
checkEmail($event){
// perform service call, assuming it returns false.
this.isEmailValid.next(false);
}
Core Component TypeScript
@Input() isEmailValid: BehaviorSubject<boolean>
ngOnInit(){
this.isEmailValid.subscribe(value => {
// display error message
});
}
My issue is that if a valid email is entered in the first field and an invalid one in the next, both fields show an error message. How can I ensure that only the specific field being focused out displays an error message? Please advise.
PS: The function call on focus out is functioning correctly; it's just that all fields show errors even if only one has an incorrect email.